- Include a 1.5k JS utility + specific sonic configuration
- Depend on HTML5 Canvas: lacking browser support & potential performance costs
The spinner you use should be tailored to your needs though. This particular niche of graphic animation is split between various different techniques, each with merits of their own, so choose wisely…
State of spinners 2013
- Good: simple, widely supported
- Bad: limited FPS (depends on browser), 256 colours, difficult to change
- Good: More colors than GIF, 8-bit transparency
- Bad: Support very limited, difficult to change
- SVG via
- Good: Widely supported, easily editable, pixel control, can cache rendered frames
- Bad: Only IE9+, can be slow if frames aren’t cached
- Good: Widely supported, relatively quick
- Bad: Little opportunity for browser to optimise, difficult to change
- Good: Widely supported, easily editable
- Bad: Little opportunity for browser to optimise, continually recalculated 
- Sprite animated via CSS3
- Good: GPU acceleration (depending on browser, device)
- Bad: Difficult to edit (Sprite), IE9 and below not supported
- DOM+CSS Animated via CSS3
- Good: GPU acceleration (depending on browser, device), easily editable
- Bad: IE9 and below not supported
The graphical capabilities of each technique should also be taken in account. If it’s a straightforward circling snake or dots then you’re probably best going with either SVG or DOM+CSS. If, on the other hand, it’s a more complex animation (e.g. gradients, blur, unique pathing) you may want to venture into Canvas territory or even developing your own PNG Sprite in Photoshop (or Sonic Creator!!). That said, a straightforward GIF may be the best solution if you’re not too fussed about 256 colours, lack of alpha transparency or a lower FPS.
From limited testing the most performant spinners are those using CSS3, either to animate DOM elements, or to animate through a PNG Sprite. Of course, a single spinner on a page will cost very little, so it’s not necessarily something you need to worry about.
For CSS+DOM Animation where all you want is a basic spinner (i.e. lines arranged in a circular fashion pulsating with frequency) I suggest using spin.js which utilises CSS3 Animations and falls-back to VML in older versions of IE.
If you do need more control and are happy using either HTML5 Canvas, GIFs or PNG Sprites (with CSS3) then I reckon you should try out Sonic Creator.