Circular Progress bar around image

Question

I'm looking to get some help on a progress bar that goes around an image. I have provided my code below. If anyone can help it is highly appreciated!

Example Of what I need (The red Circles are the "images" and the green bars are the percentage bars that revolve around the image):

Example of progress bar

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>

Please show us what you have tried/researched to achieve your goal or what went wrong in the process. please refer to this [help page](http://stackoverflow.com/help/how-to-ask). — Matthew, Jan 24 '17 at 03:39
http://stackoverflow.com/questions/14222138/css-progress-circle — Carlton, Jan 24 '17 at 03:53
Possible duplicate of [CSS Progress Circle](http://stackoverflow.com/questions/14222138/css-progress-circle) — Carlton, Jan 24 '17 at 03:53

score 0 · Answer 1 · answered Jan 24 '17 at 09:46

This can be done using an svg element with a circle that has a stroke-dasharray property in its styling. You can then use JavaScript to set the 'stroke-dasharray' property for the circle.

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>

This example is slightly complex, but I think that it is better to try and demonstrate with different radii rather than forcing you to use one that I have determined.

Circular Progress bar around image

1 Answers1