Circular Progress Bar um Bild

Question

Ich bin auf der Suche nach etwas Hilfe auf einem Fortschrittsbalken, der um ein Bild geht. Ich habe meinen Code unten zur Verfügung gestellt. Wenn jemand helfen kann, wird es sehr geschätzt!

Beispiel dafür, was ich brauche (Die roten Kreise die „Bilder“ sind und die grünen Balken sind die Prozentbalken, die sich um das Bild drehen):

Code:

<div class="imgmeter"> 
    <div class="img-percent-bar"> 
     <td class="usrimg"> 
      <img src="assets/img/img.png"> 
      <div class="bar"></div> 
     </div> 
     <div class="percentage"> 
      <i><b>50.00%</b></i> 
     </div> 
    </div> 

Answer 1

Dies kann mit einem svg Element mit einem circle, das eine stroke-dasharray Eigenschaft in seinem Styling hat getan werden. Sie können dann JavaScript verwenden, um die Eigenschaft 'stroke-dasharray' für den Kreis festzulegen.

var circle = document.getElementById("circle_loader"), 
 
    percentage = document.getElementById("percentage"), 
 
    radius = document.getElementById("radius"); 
 
document.getElementById("percentage").addEventListener("change", function() { //when the percentage changes 
 
    var dasharray = (Number(percentage.value) * 2 * Number((Number(radius.value) * Math.PI))) + ", " + ((1 - Number(percentage.value)) * 2 * Number((Number(radius.value) * Math.PI))); 
 
    circle.style.strokeDasharray = dasharray; //sets the dasharray 
 
}); 
 
radius.addEventListener("change", function() { //when the radius changes 
 
    var dasharray = (Number(percentage.value) * 2 * (Number(radius.value) * Math.PI)) + ", " + ((1 - Number(percentage.value)) * 2 * (Number(radius.value) * Math.PI)); 
 
    circle.style.strokeDasharray = dasharray; //sets the dasharray 
 
    circle.setAttribute("r", radius.value); //sets the radius 
 
    circle.style.strokeDashoffset = Number(radius.value) * Math.PI * 0.5; //sets the starting point of the stroke to the top of the circle 
 
});

#svg_circle_loader { 
 
    background: none; 
 
    border: none; 
 
    margin: none; 
 
    padding: none; 
 
} 
 
#circle_loader { 
 
    fill: none; 
 
    stroke: #F00; 
 
    stroke-width: 10px; 
 
    /* rotates the circle's stroke so that the start is at the top */ 
 
    stroke-dashoffset: 78.5; 
 
    /* the 0 is the length of the arc filled by the stroke, and the 314 is the diameter (2 times the circle radius) times pi (3.14...) which is the "gap" between the coloured stroke arcs */ 
 
    stroke-dasharray: 0, 314; 
 
    /* not necessary, but makes it look smoother */ 
 
    transition: all 0.2s linear; 
 
}

<form> 
 
    <!-- to demonstrate the system --> 
 
    <input id="radius" type="range" min="10" max="100" value="50" step="1" name="radius"> 
 
    <br><span>radius</span> 
 
    <br> 
 
    <input id="percentage" type="range" min="0" max="1" value="0" step="0.01" name="percentage"> 
 
    <br><span>percent complete</span> 
 
</form> 
 
<!-- the loader itself --> 
 
<svg id="svg_circle_loader" width="200" height="200"> 
 
    <!-- example values for dimensions --> 
 
    <circle cx="100" cy="100" r="50" id="circle_loader"></circle> 
 
</svg>

Dieses Beispiel ist etwas komplexer, aber ich denke, dass es besser ist, mit unterschiedlichen Radien, um zu versuchen und zu demonstrieren, anstatt Sie zwingt einen verwenden, die ich bestimmt habe.