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

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

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