Whoo! CSS3 only arc (circular progress)

von Moritur am 28. March 2012

I always loved these arcs to display progress, but the only way to create them is using JavaScript and a canvas or simply images.
But with the new awesome CSS3 techniques it is finally possible to create them with pure CSS.

So this is how a pure CSS3 arc looks like (try a hover)

o
o
35%

This works best in Chrome, but also in Firefox and Opera
IE is not supported – Who would have thought?


Chrome has this great feature to use gradients as a mask. Thats how the inset around the circle is created (FF and Opera only show a white border)

Of course I will try to explain how it’s done.

The Markup is pretty simple:

Now we’ve got several elements which might not be obvious. The basic idea is to create two circles which mask two boxes. When we do that correctly it looks like there is an arc between them.

The key is to use the new CSS3 “skew” so that the arc is not just a vertical line. So .arc2 gets the following CSS:

On hover we can animate this with:

Well.. There is much more going on but you should get the basic idea. Here is a fiddle where you can try it out:
http://jsfiddle.net/Moritur/FTqkG/4/

I’d love to hear your thoughts! How to improve the arc?
It’s still a problem that the arc itself is not a single element. Do you know a way to solve this problem?

Was meinst du dazu?

Pflichtfeld.

Pflichtfeld. Wird nicht veröffentlicht.

Wenn du eine hast.