图像周围的圆形进度条

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元素来完成，circle元素在其样式中具有stroke-dasharray属性。然后，您可以使用JavaScript来设置＆＃39; stroke-dasharray＆＃39;圈子的属性。

＆＃13;

＆＃13;

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
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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