SVG Spinner

Modern loading spinner without JavaScript or unnecessary DOM Elements. The spinner and animations are implemented as SVG.

Why SVG?

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.

Usage

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

Parameters

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.

Example

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

Browser Support:

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+

(see: Can I Use: SVG in CSS backgrounds)

License

WTFPL (see license.txt)