Spin.js, a pure JS spinner

[seanalltogether]

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

[robert-boehnke]

My gut feeling is that if you rendered the different stages of the animation into multiple images using canvas and just toggled their visibility, you could get better performance.

[tobbez]

I see the same problem in Opera too, except it's even worse (the animation lags, and it hogs a whole CPU core).

Explorer is better than Firefox and Opera, but still pretty high CPU usage.

The only browser of the ones I tested that it seems to be relatively fine in is Chrome.

[mrinterweb]

100% on Chromium 13

[ralphsaunders]

Getting around 20% to 35% on Chrome 15

[darrenkopp]

1% on chrome

[zenijin]

Less than 10% CPU for me, with Firefox 6.0.

[bb999]

Interesting replies. 0% on IE 9 and Chrome 13, and 15% on firefox 5 (which translates to 60% of a core). Running Win 7 x64. Aaaaaand... just upgraded to Firefox 6. 0%. Rather fickle piece of javascript, eh?

And just because why not:

IE 8 in a winXP vm: 0%

IE 6 in a winXP vm: 0%

Doesn't work in FF3.

[conradev]

3% cpu in Safari 5.1

[rubergly]

Didn't realize this. Oh well. It's still cool and interesting, but I guess never that feasible.

[recoiledsnake]

On Opera, whenever the spinners are visible, page scrolling is extremely laggy and slow.

[Nycto]

A spinner generated from http://www.ajaxload.info/ 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.

[tintin]

Also keep an eye on:

  <input type="range"  min="0" max="100">
  <input type="number" min="0" max="100">

http://www.w3schools.com/html5/html5_form_input_types.asp

[coverband]

Agreed... This is fine as an exercise but I don't want to maintain code for every minor component; I'd rather go with an image even if it were bigger than 3K.

[jabkobob]

But the ajaxload spinner is evil and they still haven't fixed it! http://www.panic.com/blog/2010/10/spinner-rage/

[ww520]

The site is great. Thanks for the find.

[jsdalton]

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.

[alanh]

If you want to show actual progress and have actual data indicating progress, there are much better ways to show it.

- Progress bar. Indicates estimated percent completed at a glance. Perfect for uploads/downloads where file size and progress is known.

- Text and/or line/sparkline graph. If you only know speed, this is how to show it.

How is the user supposed to know spin rate means anything?

[Cushman]

Doesn't that defeat the purpose, though? Progress indicators are designed to make you think things are going faster than they are. If you want to display accurate information, why not just display it?

[r00fus]

Isn't this similar to how the iOS "download" meter shows network rate?

[JohnnyBrown]

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

[dw0rm]

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.

[gregory80]

I'm a fan of http://preloaders.net/

[rawsyntax]

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

[heliodor]

I tried them and they produced poor quality. They couldn't even get the white background correct! I suppose their #1 ranking on Google is making them complacent.

http://www.loadinfo.net/ is much better presented and actually respects the color values you type in! (And no, I don't have any relationship with them.)

[dalore]

What's the battery drain like?

[hasenj]

It's not like animating a gif doesn't use up CPU cycles.

[pavel_lishin]

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.

I wonder if this could happen in a regular browser, too?

[alanh]

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.

I have a hunch that’s correct, but don’t know.

I do 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.) http://stackoverflow.com/questions/6937149/best-practice-too...

[Sephr]

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.

[justincormack]

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

[onedognight]

The DOM for the spinner is created with Javascript, but the spinning is entirely CSS.

[Jarred]

Surprinsingly, it worked on my Samsung Focus.

It was spinning very slowly, but the Mango update supports CSS3 well it seems.

[ck2]

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

[uast23]

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.

[nicklovescode]

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.

[minikomi]

For those who want something minimal.. http://jsfiddle.net/4mrCU/2/embedded/result/

[paisible]

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

[jdelsman]

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

[dougaitken]

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

[wyclif]

Resolution independant

Independent.