CSS Triangles + Animations = Pie Chart Spinner

phuu.net

36 points·Swizec··14 comments

Open articleView on HN

I did something similar to this a couple of months ago, but I did a few variants of it:

http://coffeepowered.net/projects/timer.html

I think I used two half-circles plus a half-circle mask for mine.

Wow, love it – really nice. I shall put together some more demos, see where it can be taken!

Those are great, cheald, nice work.

Reminds me of the olden days of IE. The times when some scripts only worked in IE.

I know what you mean – I totally don't intend this for production, I just did it for the sake of doing it. When/if I write a tutorial I'll do it properly and be a good web citizen.

This reminds me of the last time a tech demo got posted to HN and somebody pitched a fit because the bare-bones demo didn't work in NCSA Mosaic.

It's just a demo, people. Not production, not even beta, not even a product — a demo. Don't be haters.

Wouldn't this be better using SVG or canvas?

I'm not sure I like CSS for this type of thing.

Agree- SVG probably has broader support than CSS animations and you can create something much better.

I'm really curious about the lack of love for SVG.

Deleted comment

It uses CSS animations via webkit-keyframes. It might work in Firefox with -moz prefixes.

I did Save Page -> Find/Replace All "webkit" "moz" Works :)

Nope, only that I didn't put in -moz- prefixes. Probably shoulda!

"needs webkit [or Opera.Next]"

Fails in IE9, Firefox 12, Opera 11.62.

Looks different in Chrome 18 and Safari 5.1.5 (not sure which one is correct).

Reply on news.ycombinator.com