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 can be static as long as I have a attribute to change its current status.

Answer 1

Following is the idea I used to use. With a bit of modification in css and animation tag we can achieve more effects for intuitive user experiences.

---SAMPLE CODE----

.over{
  -webkit-animation: rotator 1.5s ease-in-out infinite;
  stroke-dasharray: 107,38;
}
.bag{
  position: absolute;
}
@-webkit-keyframes rotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div class="container">
  <svg class="bag" height="100" width="100">
    <circle  cx="50" cy="50" r="40" stroke="#F8BBD0" stroke-width="3" fill="none">
    </circle>
  </svg>
  <svg class="over" height="100" width="100">
    <circle  cx="50" cy="50" r="40" stroke="#E91E63" stroke-width="3" fill="none" >
      <animate attributeType="CSS" attributeName="stroke-dasharray" from="1,254" to="247,56" dur="5s" repeatCount="indefinite" />
    </circle>
  </svg>
</div>

Hope you were looking for something kind of this. :)

Answer 2

Thanks, boldewyn.

To answer my own question, I found the following solution:

One can use the following path in template:

<path id="progress" fill="none" stroke="#ffffff" d="" stroke-width="10"/>

And use this function from Raphael js-framework to update x and y. If total is 100, value is the percentage of progress:

function updateState (value, total, R) {
    var center;
    var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = 300 + R * Math.cos(a),
        y = 300 - R * Math.sin(a),
        path;
    if (total == value) {
        path = "M"+ 300 +","+ (300 - R) +" A"+ R+","+ R+","+ 0+","+ 1+","+ 1+","+ 299.99+","+ 300 - R;
    } else {
        if(alpha > 180) {
            center = 1;
        } else {
            center = 0;
        }
        path = "M"+ 300+","+ (300 - R) +" A"+ R+","+ R+","+ 0+"," + center +","+ 1+","+ x+","+ y;
    }
    return path;
}

The returned path variable is the value for the d attribute on the path element.

This works perfect, if your browser supports SVG Full with the Elliptical Arc command for the path-element. In my case I only have SVG tiny, so this wont work for me :(