Activity spinners - animated GIFs, CSS3 animation, or JavaScript (spin.js)?

7
votes

I'd like to add a spinner to my site and I'm wondering which method to use. My initial investigation resulted in the following (see links and Why not animated GIF instead of animated CSS sprites?):

Animated GIFs

Pros

  • Depending on the specific spinner(s), may provide the smallest footprint (673 bytes for the default one from AjaxLoad)
  • High browser compatibility
  • Simple to use with data binding (simply bind to the visibility of the img tag)

Cons

  • Gifs can't be changed once downloaded
  • Gif animation can't be started/stopped reliably
  • All instances animate at the same time in a synchronized manner
  • Animation may freeze in some circumstances, such as HTML manipulation

JavaScript (spin.js)

Pros

  • Highest browser compatibility (even falls back to VML)
  • Highly dynamic and customizable

Cons

  • Larger footprint (4.02KB for spin.min.js 2.0.1)
  • Possible CPU usage issues (link)

CSS

Pros

  • Dynamic and customizable
  • Purely declarative (no JS)

Cons

  • Larger footprint (4.32KB for one the default spinners from CSSLoad)
  • Poorest browser support (requires CSS3)
  • Possible CPU usage issues (link)

Do you agree with the analysis above?

In simple cases, would it make sense to go with gifs as they seem to keep things simple while being fairly compatible?

1
javascriptcssuser-interfaceanimated-gif
1) I don’t think CPU usage is necessarily less of an issue with a GIF, 2) the size “footprint” might largely depend on what kind of animation/image you want. // F.e. for a “rotating” spinner you could combine a (static) image with CSS for rotation. But if compatibility is your main objective, then I’d go for a GIF too. - CBroe
@CBroe thank you. Downvoters / Closevoters - how is this not clear or opinion based? There are 3 ways to achieve the same effect and I'm trying to understand the pros and cons of each one. - Ohad Schneider
To correctly answer this we would have to write a book on the topic. And even if we would do that it still tells you nothing, because it will be different for different cases. Also it is unclear what you are asking because there is no question at all. - PeeHaa
@PeeHaa I've edited the post to make my question(s) more clear, and added some references. I understand this is a big topic but I'm looking for guidelines, one has to start somewhere... - Ohad Schneider
Hm.. make gif from spin.js will be not bad idea. Taking into account that u will use spinners for heavy stuff with js ecma4/5/6 or angular or any framework plus newer XMLHttpRequest standards browser compatibility and 4kb are not an issue now a days. There are bigger problems with memory allocation for js site in webbrowser and newbies js programers who doesnt need js debbuger in their projects, any js projects. delete - fearis

1 Answers

1
votes

A few other considerations (sorry too big to put in a comment)

GIFS Con: no variable transparency, I've had cases where the desired effect is to 'dim' the page behind and put a loader in place but of course this means nasty jagged edges as you cannot match the background colour on aliasing.

Pro: animated gifs tend to load progressively with the browser showing whatever image data it has therefore it'll show the first frame superfast - which is a key consideration in a loader image

Also worth a mention is SVG animations which I've found to work really well for complex loader sequences for heavier single page sites (marketing campaign sites etc). Of course you dont get support across the full browser spectrum but I've certainly had situations where these have been the obvious goto.