SVG images are quite small and fully scalable as they are vector based. A simple, animated SVG spinner with 12 dots weights about 750 bytes (gzipped ~350 bytes) and looks nice at any resolution. For comparison, the spin.js script weights more than 4 times as much.
Too lazy to write SVG files?
No problem. I added a spin generator script written in CoffeeScript (and a compiled version) executable with Node.js to generate your spinner SVGs.
Run in your terminal:
$ coffee tools/spingenerator.coffee > spinner.svg
or the following, if you don't have CoffeeScript installed:
$ node tools/spingenerator.js > spinner.svg
Wouldn't it be sad if you could not change a single parameter? Indeed, so you can:
$ coffee tools/spingenerator.coffee <dots> <dotSize> <radius> <duration> <minOpacity> <maxOpacity> <eccentricity> <color>
dots(int) Number of dots (Default: 12)
dotSize(float) Size (radius) of one dot (Default: 2)
radius(float) Radius of the spinner (Default: 10)
duration(float) Speed of the animation in seconds (e.g.
1.4) (Default: 1.2)
minOpacity(float between 0 and 1) Minimum opacity of a dot (Default: 0)
maxOpacity(float between 0 and 1) Maximum opacity of a dot (Default: 1)
eccentricity(float between -0.9999 and 0.9999) The eccentricity of the ellipse; semimajor (radius == dotSize) axis is Y if positive, X if negative (Default: 0)
color(string) A valid CSS color to fill the dots (Default: "black")
If you only want the dots without any animation, set the duration parameter to a negative value.
A spinner with 16 Dots at the size of 2, a radius of 20 and a minimum opacity of 0.3:
$ coffee spingenerator.coffee 16 2 20 0.3 > spin.svg
If you don't have to support for every crappy web browser like IE6-8 there is no reason not to use SVG spinning animations. For ancient technology you can always include a fallback png/gif or whatever you want.
SVG is supported by the following browsers:
- IE 9+
- Firefox 4+
- Chrome 4+
- Safari (3.2+ partial, 5+ full)
- Opera 9.5+
- iOS (3.2+ partial, 4.2+ full)
- Opera Mini 5+
- Android Browser 3+
- Blackberry Browser 7+
- Opera Mini 10+
- Chrome for Android 18+
- Firefox for Android 15+
WTFPL (see license.txt)