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
, scale: 1.0 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#000' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 0 // The rotation offset
, direction: 1 // 1: clockwise, -1: counterclockwise
, speed: 1 // Rounds per second
, trail: 100 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: true // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
}
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.

The spinner element must be surrounded by an element using relative positioning, or the spinner will be outside of the parent element.

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.3.2 (24.07.2015)

Version 2.3.1 (16.06.2015)

Version 2.1.2 (28.05.2015)

Version 2.1.1 (28.05.2015)

Version 2.1.0 (16.04.2015)

Version 2.0.1 (24.04.2014)

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.