cramer.co.za
CSS3 + Jquery Ring Progress bar - David Cramer
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…
David Cramer