Create SVG progress circle

Question

Anyone know how to create a circle \"progressbar\" in svg? I need to specify the percentage of the circle, så that a color grows in the shape of a cake.

The growing

Answer 1

Some time ago, I was needing one so I studied a lot to get it done. All you need is a simple SVG markup with the right coordinates, a bit of CSS for it and a little bit of JS (to allow change the % of the progress bar). But at same time you can generate the SVG on the back-end with the right coordinates based on the % you want and unless your progress cannot be read-only, that would work as well.

This is the implementation: http://codepen.io/leandroico/pen/zwIHl

And this is the sample of the SVG markup:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <g class="arcs">
    <circle cx="50" cy="50" r="49" class="outer-circle" />
    <path d="M50 1 A 49 49, 0, 1, 1, 7.06 73.61, L 50 50 z" class="outer-arc" id="arc1" />
    <circle cx="50" cy="50" r="35" class="inner-circle"  />
    <path d="M50 15 A 35 35, 0, 1, 1, 19.33 66.86" class="inner-arc" id="arc2" />
  </g>
  <g class="circles">
    <circle cx="50" cy="50" r="49" class="outer-circle" />
    <circle cx="50" cy="50" r="35" class="inner-circle" />
  </g>
  <text x="50" y="58" id="percentage-label">67%</text>
</svg>