画像の周りに円の進行バーがあります

Question

画像の周りにある進​​行状況バーに助けを求めています。私は以下のコードを提供しました。誰かがそれを助けることができれば非常に高く評価される！私は（赤い丸が「画像」であり、緑色のバーは、画像を中心に展開パーセンテージバーである）必要があるものの

例：

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

svgの要素を使用して、stroke-dasharrayのスタイリングを持つcircleの要素を使用して行うことができます。 JavaScriptを使用してサークルの 'stroke-dasharray'プロパティを設定できます。

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>

この例

は少し複雑ですが、私はそれを試してみて、私が判断したものを使用することができ強制するのではなく、異なる半径を実証する方が良いと思います。