Spinners

Spinners is a JavaScript library that creates pixel-perfect cross-browser loading icons through Canvas. Written for use in Lightview and Tipped, feel free to use it in your own projects.

Demo (GUI): http://projects.nickstakenburg.com/spinners

Installation

Spinners is based on jQuery, it also requires ExplorerCanvas to work in Internet Explorer 8 and below, include both scripts above Spinners.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!--[if lt IE 9]>
  <script type="text/javascript" src="/js/excanvas.js"></script>
<![endif]-->

<script type="text/javascript" src="/js/spinners.min.js"></script>

Usage

Spinners can be created using a DOM Node or a CSS Selector. Spinners start out in a paused state because animation takes up a small amount of browser resources, because of this it's recommended to only animate spinners when they are visible.

var spinner = Spinners.create(document.getElementById('mySpinner')).play(); // will start the animation
spinner.pause(); // pauses the spinner

// multiple spinners using a CSS Selector
var spinners = Spinners.create('.loading').play();
spinners.pause();

Options can be used to customize the spinners:

Spinners.create('.loading', {
  radius: 22,
  dashes: 30,
  width: 2.5,
  height: 10,
  opacity: 1,
  padding: 3,
  rotation: 600,
  color: '#000000'
}).play();

Collections

Spinners.create returns a Collection object that controls a number of spinners.

var spinners = Spinners.create('.loading');
spinners.play();

Spinners created using Spinners.create can be retrieved using Spinners.get, this removes the need to store the Collection.

Spinners.create('.loading');
Spinners.get('.loading').pause();

Controls

The methods play, pause, stop, toggle and remove are available on Collections returned by Spinners.create and Spinners.get.

Spinners.create('.loading').play();
Spinners.get('.loading').pause();
Spinners.get('.loading').stop();
Spinners.get('.loading').remove();
Spinners.get(document.getElementById('mySpinner')).toggle();

They can also be used directly on the Spinners object using a CSS Selector or a DOM Node, this allows chaining on different Collections.

Spinners.create('#first .loading').play();
Spinners.create('#second .loading');

Spinners.play('#first .loading').pause('#second .loading');
Spinners.remove('#first .loading').play('#second .loading');

Spinners.toggle(document.getElementById('mySpinner'));

Positioning

Options can be changed after initialization using setOptions.

var spinners = Spinners.create('.loading');
spinners.setOptions({ color: '#ff0000' });

Removal

The remove method will remove the created spinners from the DOM.

Spinners.get('.loading').remove();

It might be easier to just remove elements from the DOM followed by a call to Spinners.removeDetached, this function is also called automatically each time a new spinner is created.

// after deleting elements with spinners or doing some ajax updates
Spinners.removeDetached();

Positioning

Use center to center the element that holds the spinner within its parent. This is done using absolute positioning, the parent element will be given position:relative. In this example #spinner will be given position:absolute and its parent position:relative.

Spinners.create('#spinner').center().play();

Dimensions

Spinners.getDimensions will return the dimensions of a created spinner. This could be useful when center() isn't used to position the spinner.

var dimensions = Spinners.getDimensions(document.getElementById('mySpinner'));
// dimensions; //--> { width: 28, height: 28 }