图像周围的圆形进度条

Question

我希望得到一个围绕图像的进度条的帮助。 我在下面提供了我的代码。 如果有人可以提供帮助，我们非常感谢！

我需要的示例（红色圆圈是“图像”，绿色条形是围绕图像旋转的百分比条）：

码：

<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

这可以使用带有circle的svg元素来完成，该circle在其样式中具有stroke-dasharray属性。 然后，您可以使用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> 

这个例子有点复杂，但我认为最好尝试用不同的半径进行演示，而不是强迫你使用我已经确定的半径。