How do you create percentage circles


how do you create graphics to show percentages or values.

i saw it on one website but now i dont remember.

some kind of simple circles showing percentage.

like if the value is 65 then 65% border of circle is another color filled and rest of the circle border is of difference color filled.

or any other way to show value through graphics.

i dont want to use big script like google charts for these static values.


Hi Vineet
CSS Tricks has a great tutorial on how to create “percentage pies”. You can scrap the JS for the filling and set it up to a specific percentage to fill. And if you want a static circle-center with text or something in it, place an absolute positioned circle with the background color you want and you’re set.

This SVG technique may be of interest, I will try it on a site I am busy doing some SVG Charts.

hi john

can these be used on commercial website ??


I have some old demos here that may be useful:

Hi PaulOB

I like the second demo with blue border circle.

but the border is slightly distorted between somewhere

is it so or only i am seeing it distorted ?


I think that’s just the standard way that small borders show and it may be smoother if the whole thing was larger. (We did have a thread here about border sharpness which may be of interest.)

You may be better off with an animated svg effect as shown here.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.