7

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?

Community
  • 1
  • 1
Ohad Schneider
  • 36,600
  • 15
  • 168
  • 198
  • 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 Aug 16 '14 at 17:45
  • 1
    @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 Aug 16 '14 at 18:26
  • 1
    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 Aug 16 '14 at 18:46
  • @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 Aug 16 '14 at 20:49
  • I came here searching for just a question like this one. It's a good question. If someone measured the CPU usage and load time of each possibility that'd be an objective and good answer. – Alexander Ljungberg Oct 29 '14 at 09:21
  • One other thing to consider on a CSS based spinner is that you can use either an image or a font icon library. – BrightIntelDusk Nov 04 '14 at 00:14
  • em what is SPINNER ? for loading, for header, for footer ? touch gesture enabled ? css font + animation as for me – fearis Nov 22 '14 at 23:49
  • @fearis I was referring to a general-purpose spinners that indicate some sort of processing or loading. Not sure how touch is related. – Ohad Schneider Nov 23 '14 at 19:40
  • 1
    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 Nov 23 '14 at 20:03

1 Answers1

1

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.

Alex
  • 3,732
  • 5
  • 37
  • 59