https://github.com/rendro/svg-spinner

Loading spinner with SVG, no JavaScript, no unnecessary DOM Elements
https://github.com/rendro/svg-spinner

Last synced: 11 months ago
JSON representation

Loading spinner with SVG, no JavaScript, no unnecessary DOM Elements

• Host: GitHub
• URL: https://github.com/rendro/svg-spinner
• Owner: rendro
• License: wtfpl
• Created: 2012-11-19T08:43:04.000Z (over 13 years ago)
• Default Branch: master
• Last Pushed: 2014-11-14T00:48:16.000Z (over 11 years ago)
• Last Synced: 2024-12-31T19:43:57.129Z (over 1 year ago)
• Homepage: http://rendro.github.io/SVG-Spinner/
• Size: 139 KB
• Stars: 113
• Watchers: 10
• Forks: 20
• Open Issues: 3
• Metadata Files:
  • Readme: Readme.md
  • License: license.txt

Awesome Lists containing this project

README

          
# 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` (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](http://caniuse.com/#feat=svg-css))

## License

WTFPL (see license.txt)