javascript - 图像周围的圆形进度条

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

这可以使用 svg 元素和一个 circle 来完成，该元素的样式中有一个 lines-dasharray 属性。然后，您可以使用 JavaScript 设置圆的“行程-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>

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