HTML5 / CSS3 Cercle Partielle de la Frontière

Oui, il est possible de voir ce:

démo

CSS:

.circle {
  position: relative;
  margin: 7em auto;
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background: lightblue;
}

.arc {
  overflow: hidden;
  position: absolute;
  /* make sure top & left values are - the width of the border */
  /* the bottom right corner is the centre of the parent circle */
  top: -1em;
  right: 50%;
  bottom: 50%;
  left: -1em;
  /* the transform origin is the bottom right corner */
  transform-origin: 100% 100%;
  /* rotate by any angle */
  /* the skew angle is 90deg - the angle you want for the arc */
  transform: rotate(45deg) skewX(30deg);
}

.arc:before {
  box-sizing: border-box;
  display: block;
  border: solid 1em navy;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  transform: skewX(-30deg);
  content: '';
}

HTML:

<div class='circle'>
  <div class='arc'></div>
</div>

Il utilise du JavaScript, donc il se casse de la demande initiale 🙁

.. il n'est toutefois fournir

Il est a >> démo << ici

@gkond Merci, j'ai tiré ce à partir de votre réponse

JS:

//create a circle using HTML5 /CSS3 /JS which has a border that only goes part-way around
//the circle .. and which can be smoothly animated from 0% to 100% around the circle
//this solution allows for animation and still results in relatively clean code
//we use four quarter-circles, all hidden away behind a white square to start with..
//all four are rotated out clockwise, and each quarter will stop at it's own maximum:
//q1 at 25%, q2 at 50% .. etc. once we reach a value at or over 25%, all four quarters
//should be out from behind the white square, and we can hide it.. it needs to be
//hidden if we display a value over 75%, or else q4 will end up going in behind it again
//.. also, since the top border will usually sit between the angles of  -45 to 45, we
//rotate everything by an extra -45 to make it all line up with the top nicely
var fromHidden = -90;
//utility funciton to align 0 degrees with top
//takes degrees and returns degrees - 45
function topAlign(degrees) {
return degrees - 45
};
//utility function to rotate a jQuery element
//takes element and the degree of rotation (from the top) 
function rotate(el, degrees) {
var degrees = topAlign(degrees || 0);
el.css(
'transform', 'rotate(' + degrees + 'deg)',
'-webkit-transform', 'rotate(' + degrees + 'deg)',
'-moz-transform', 'rotate(' + degrees + 'deg)',
'-ms-transform', 'rotate(' + degrees + 'deg)',
'-o-transform', 'rotate(' + degrees + 'deg)'
)
}
//function to draw semi-circle
//takes a jQuery element and a value (between 0 and 1)
//element must contain four .arc_q elements
function circle(el, normalisedValue) {
var degrees = normalisedValue * 360; //turn normalised value into degrees
var counter = 1; //keeps track of which quarter we're working with
el.find('.arc_q').each(function() { //loop over quarters..
var angle = Math.min(counter * 90, degrees); //limit angle to maximum allowed for this quarter
rotate($(this), fromHidden + angle); //rotate from the hiding place
counter++; //track which quarter we'll be working with in next pass over loop
});
if (degrees > 90) { //hide the cover-up square soon as we can
el.find('.arc_cover').css('display', 'none');
}
}
//uses the the circle function to 'animate' drawing of the semi-circle
//incrementally increses the value passed by 0.01 up to the value required
function animate(el, normalisedValue, current) {
var current = current || 0;
circle(el, current);
if (current < normalisedValue) {
current += 0.01;
setTimeout(function() {
animate(el, normalisedValue, current);
}, 1);
}
}
//kick things off ..
animate($('.circle'), 0.69);

CSS:

.circle {
position: relative;
margin: 20px;
width: 120px;
height: 120px;
}
.arc_q {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 50%;
border: 10px solid;
border-color: transparent green transparent transparent;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
.arc_cover {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
background-color: white;
}

HTML:

<div class="circle">
<div class="arc_q"></div>
<div class="arc_q"></div>
<div class="arc_q"></div>
<div class="arc_q"></div>
<div class="arc_cover"></div>
</div>

Ceci peut être réalisé en paramètre une bordure transparente autour d'un cercle transparent et à l'aide de border-top-color: ; pour donner une section de cercle frontière de la couleur.

background-color:transparent;
border:3px solid transparent;
border-top-color: green;

Cela crée un cercle avec une bordure uniquement autour de la partie supérieure du trimestre;

Vous pouvez également utiliser

border-bottom-color:green;

ainsi que de la gauche et de la droite à la frontière différents quartiers de la circonférence des cercles.

Ici un violon pour un chargeur avec 3 cercles partiels qui tournent à l'intérieur les uns des autres dans d'autres directions qui montrent en action.

Voici un violon pour un chargeur avec 3 cercles partiels qui tournent à l'intérieur les uns des autres dans d'autres directions que montrer en action.