A tweet-sized, image-free, cross-browser loading spinner.
Advantages over using an animated GIF:
- No extra HTTP request
- Alpha transparency
- Scaleable, so you can zoom in!
The JavaScript function creates eight <b> elements containing a bullet character (\u2022) and cycles through their CSS classes every 99 ms. Take a look at the example to see what it looks like.
The example includes conditional comments to use solid shades of gray instead of different opacity levels for IE. Alternatively you could use the Alpha() filter, it's up to you.
If you only need to target WebKit browsers, you may also use this version which requires less CSS and has the typical Apple activity-indicator look.
There's even a third variant that uses the activity-indicator look on WebKit browsers and falls back to the circle of dots.
On iOS devices setInterval()-based animations will halt while resources are loaded. Combining this Gist with the requestAnimationFrame polyfill should help.