reggaeboss — 2013-09-07T14:26:50-04:00 — #1
Check out the "skillmeters" on this site, how would I do this? I can make a progress-bar that fills up with a css keyframe-animation but how should I do to make it a circle that fills like this? If I make a circle in a circle and use keyframe-animate width it would fill from one side to another, and not around like this one?
Anyone know how to do this?
ronpat — 2013-09-07T15:57:50-04:00 — #2
Launch the web page.
Right-click on the page and "View Page Source..."
Read the source code. All of the resources used can be found therein.
That's what we would have to do.
pdxsherpa — 2013-09-07T19:25:44-04:00 — #3
paulob — 2013-09-08T07:30:58-04:00 — #4
The circle in that animation is done with drawing on the "canvas" and animated with js and is not a css3 animation.
paulob — 2013-09-08T11:33:52-04:00 — #5
This is the best I could come up with css alone.
I'm sure there's a better way to do it. It could be made smoother with more elements.