CSS3 loading spinners without images | Hacker News Reader

CSS3 loading spinners without images

kilianvalkhof.com

58 pointskilian19 comments

I might have a really lame computer, but that thing really freezes up my browser

Same here.

Running Safari 4 on the mac and it runs great ;/ Thats whats annoying about this CSS stuff you never know if it will work. Hoping HTML5 will start moving forward.

Takes up some 4% of one core on my Core2 Duo Mac Mini with Safari. Which is entirely too much.

As I understand it this is a mis-appropriation of CSS3 and HTML. What really should be used for animating graphics is the HTML5 Canvas. After all the purpose here is resource generation, and not altering the presentation of a document.

I'd argue that you really should use an animated SVG for this, which is well supported in WebKit.

Serious question: why use this instead of an animated GIF?

Looks like you have a little more control over it, for one thing. Speed, pause/resume, etc.

Faster to load: no separate http request.

Graphics is sub-pixel anti-aliased. GIFs are not.

anti-aliased: that just made me test something, and yep, it also scales with zooming the page, which completely eclipses using GIFs to do things this can do. Hooray non-pixellation!

Also, try changing the background color ;) anti-aliased opacity!

Because making animated GIFs is frackin' hard for non-artsy-types (and even then, they're not easy), and they can't be modified easily or quickly compared to this.

edit: imagine, for example, making 100 different GIFs to handle spinners all over where you want different colors, different sizes, speeds, etc etc. With this, it's just a stylesheet tweak, and they cascade so you can base it off what it's in.

I'm quite happy with the results of http://www.ajaxload.info/ and usually use it for my spinning gif's.

Oh god. I just went there, selected some options, hit "generate it!" and waited patiently for a few minutes before I realized that I was staring at the very spinner I had requested.

"Man. This site takes FOREVER."

Never be afraid to outsource trivialities.

Besides from the fact that it is only Firefox and Webkit specific for now and the apparent crashes that some of you have noted here, I was actually kind of surprised at how well this (visually) turned out.

It looked all mozilla and webkit specific.

And this is a surprise?

IE8 doesn't support much CSS3 right now. http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

I exist too!

http://www.opera.com/

Reply on news.ycombinator.com