Spin.js, a pure JS spinner

I hate to be <i>that guy</i> but this takes up 45% cpu under firefox for a simple spin animation.

A spinner generated from <a href="http://www.ajaxload.info/" rel="nofollow">http://www.ajaxload.info/</a> is 673 bytes. The minified javascript from this is ~3K. I suppose the trade off is features and flexibility, but I don't find myself needing much out of my ajax spinners.

I think the possibility of dynamically changing the speed of the spinner is interesting. If your spinner was representing a file upload, for example, you could conceivably adjust the speed based on the current upload rate.

Not realizing what was meant by "spinner", I spent a few seconds waiting for the cool javascript demo to load before I realized.

Are there any GIF loader generators that have all this options (speed, sizes, color) available? Could be good to use this as a preview, and then generate the final GIF.

This is cool just for fun, but practically there are sites like <a href="http://ajaxload.info/" rel="nofollow">http://ajaxload.info/</a> that generate spinners for you, if you don't know how to do it yourself

What's the battery drain like?

Tested it on my iPhone 3gs - after some scrolling around and zooming (trying to reach the controls) the spinner "locked up" - it's no longer spinning, every bar is simply pulsing together in time, like a luminescent jellyfish.<p>I wonder if this could happen in a regular browser, too?

It was noted in this thread that this consumes a relatively large amount of resources, and it was suggested that flipping through PNG frames would be less CPU-intensive.<p>I have a hunch that’s correct, but don’t know.<p>I <i>do</i> however have an unanswered question on Stack Overflow seeking, ideally, a generator of JavaScript + PNG throbbers. First one to make ajaxload.info with PNG sprites and/or Canvas generation in supported browsers wins! (No need for most of the hideous ajaxload designs though.) <a href="http://stackoverflow.com/questions/6937149/best-practice-tool-for-ajax-loading-indicator-as-animated-png-sprite/7018520#7018520" rel="nofollow">http://stackoverflow.com/questions/6937149/best-practice-too...</a>

The only reason to use this is for scalable throbbers, and since you're only going to configure it once, it'd be much easier and more compact to just use a generated SVG+SMIL instead.

Ugh. Surely thats what CSS transforms and transitions are for. Javascript animations should be a last resort...

Surprinsingly, it worked on my Samsung Focus.<p>It was spinning very slowly, but the Mango update supports CSS3 well it seems.

My gif spinner is 1152 bytes, not sure what you are using that's taking much more.

Read through quickly at first and got mislead by 'target' assuming that anything passed as a target will start spinning and tried to spin an image :), which of course is not the case. Nice effort though.

This would be perfect for canvas games. It means that image.gif doesn't have to load, which typically requires initializing a new Image() and attaching an onLoad function. This simplifies all that.

For those who want something minimal.. <a href="http://jsfiddle.net/4mrCU/2/embedded/result/" rel="nofollow">http://jsfiddle.net/4mrCU/2/embedded/result/</a>

Very cool - love the way it's configurable, good job.

Best thing I've seen all week. Yet another nail in the coffin for image assets on the web. Thanks, CSS3!

Amazingly IE7 on XP (work PC) handled that like a trooper! Good job

<i>Resolution independant</i><p>Independent.