Circular progress meter with CSS only, no JavaScript!

on August 27, 2012
Circular Progress Meter

Following is HTML and CSS for the Circular Progress Meter. You can change the value of the colored part by changing the degree value of c1_r p for the first half and c1_l p for the second by CSS.



The value can be anything between 0deg - 180deg for each half, i.e. the colored arc can go between 0% - 100% or 0degree - 360degree cumulatively.

example ( 90 degrees or 25% )
/* progress_meter data (degree value) */
#progress_meter ul #c1_r p{ -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg);}
#progress_meter ul #c1_l p{ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg);}

example ( 270 degrees or 75% )
/* progress_meter data (degree value) */
#progress_meter ul #c1_r p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);}
#progress_meter ul #c1_l p{ -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg);}

Please share :)

comments powered by Disqus
© www.frontendlab.net. Powered by Blogger.