So I’ve been playing with CSS3. Particularly transitions and clipping. As a result, I made this animated ring progress bar.
There is still a few alignment bugs and haven’t tested on all browsers, but in the big 3 (Chrome, FF and Safari) it looks pretty neat.
All layout gradients and animations are CSS3 transitions. I use jQuery to set the value and to animate the counter in the center.
To build it, I used this tutorial kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/ to make a pie chart in CSS3 as this is technically a piechart with two values and a hole in the middle.
There’s a working demo after the jump.
[css3piechart value=”100″ duration=”3000″ size=”200″]