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

Question

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?

Answer 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.