spin.js spin.min.js

Example












Features

Spin.js dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.

Usage

var opts = {
  lines: 12, // The number of lines to draw
  length: 7, // The length of each line
  width: 5, // The line thickness
  radius: 10, // The radius of the inner circle
  corners: 1, // Corner roundness (0..1)
  rotate: 0, // The rotation offset
  direction: 1, // 1: clockwise, -1: counterclockwise
  color: '#000', // #rgb or #rrggbb or array of colors
  speed: 1, // Rounds per second
  trail: 100, // Afterglow percentage
  shadow: true, // Whether to render a shadow
  hwaccel: false, // Whether to use hardware acceleration
  className: 'spinner', // The CSS class to assign to the spinner
  zIndex: 2e9, // The z-index (defaults to 2000000000)
  top: '50%', // Top position relative to parent
  left: '50%' // Left position relative to parent
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

The spin() method creates the necessary HTML elements and starts the animation. If a target element is passed as argument, the spinner is added as first child and horizontally and vertically centered.

Manual insertion

In order to manually insert the spinner into the DOM you can invoke the spin() method without any arguments and use the el property to access the HTML element:

var spinner = new Spinner().spin();
target.appendChild(spinner.el);

Positioning

Since version 2.0.0 the spinner is absolutely positioned at 50% of its offset parent. You may specify a top and left option to position the spinner manually.

Note: The spinner element is a 0×0 pixel DIV that represents the center of the spinner. Hence, if you passed {top:0, left:0} only the lower right quater of the spinner would be inside the target's bounding box.

Hiding the spinner

To hide the spinner, invoke the stop() method, which removes the UI elements from the DOM and stops the animation. Stopped spinners may be reused by calling spin() again.

jQuery plugin

Spin.js does not require jQuery. Anyway, if you want to use jQuery you may use this plugin.

Supported browsers

Spin.js has been successfully tested in the following browsers:

Changes

Version 2.0.0 (13.03.2014)

Version 1.3.3 (24.12.2013)

Version 1.3.2 (26.8.2013)

Version 1.3.1 (19.8.2013)

Version 1.3.0 (2.4.2013)

Version 1.2.8 (28.1.2013)

Version 1.2.7 (2.10.2012)

Version 1.2.6 (30.08.2012)

Version 1.2.5 (22.03.2012)

Version 1.2.4 (28.02.2012)

Version 1.2.3 (30.01.2012)

Version 1.2.2 (8.11.2011)

Version 1.2.1 (5.10.2011)

Version 1.2 (16.9.2011)

Version 1.1 (6.9.2011)

Version 1.0 (16.8.2011)

Contact

If you encounter any problems, please use the GitHub issue tracker.
For updates follow me on Twitter.
If you like spin.js and use it in the wild, let me know.