Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Loading spinner with SVG, no JavaScript, no unnecessary DOM Elements
branch: master
Failed to load latest commit information.
images initial commit
tools Add eccentricity and fill color options
Readme.md Fixing typo
index.html fixed spinner2
license.txt added license because reasons *sigh*

Readme.md

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)

Something went wrong with that request. Please try again.