We're growing into something new. Read More
pixedelic

pixedelic


CSS3 + JQuery - Ring Progress Bar

In a previous snap (https://forrst.com/posts/Uploader-27O) I made a mockup of an uploader with a ring progress bar. While exploring how to code this I cam across CSS transitions and thought that would be a great place to start. I Found this post (http://www.kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/) on how to create a CSS3 pie chart and since a ring progress bar would be just a pie chart with two values and without a center, I evolved it into this. While it uses jQuery to control the center counter and for setting the values, the animation is all CSS3 transitions. You can see a working demo here http://digilab.co.za/css3-jquery-ring-progress-bar/ yes this post is a little