Example
Features
- No images, no external CSS
- No dependencies (jQuery is supported, but not required)
- Highly configurable
- Resolution independent
- Uses VML as fallback in old IEs
- Uses @keyframe animations, falling back to setTimeout()
- Works in all major browsers, including IE6
- MIT License
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:
- Chrome
- Safari 3.2+
- Firefox 3.5+
- IE 6,7,8,9,10,11
- Opera 10.6+
- Mobile Safari (iOS 3.1+)
- Android 2.3+
Changes
Version 2.3.2 (24.07.2015)
- The UMD header is updated to protect against HTMLElement global pollution. See PR #300. (Thanks @mikesherov)
Version 2.3.1 (16.06.2015)
- There have been multiple tagging issues that produced 2.1.3, 2.2.0, and 2.3.0. In the spirit of SemVer, this release is now 2.3.1.
- The minified spin.min.js is now distributed in the repo, making Bower usage easier. See issue #250.
- Fix an incorrect comment in the file header. See PR #294. (Thanks @msheakoski)
- Remove moot
version
property from Bower manifest. See PR #295. (Thanks @kkirsche)
Version 2.1.2 (28.05.2015)
- There has been a packaging error in the last release. This release rectifies that.
Version 2.1.1 (28.05.2015)
- Spin.js now has a new maintainer: @TimothyGu (that's me ;)!
- The documentation is updated to note that the container element must use relative positioning. See issue #292.
- The examples are all fixed.
- The demo page had a bug where the direction setting does not reflect in the option object.
- The website now uses the latest version of jQuery from its 1.x branch.
- Standard CSS attributes are now preferred over vendor ones if they are supported.
- spm support is now added. See PR #232. (Thanks @afc163)
- Internally the coding style is now unified across all files.
Version 2.1.0 (16.04.2015)
- Added the scale option. See PR #287. (Thanks samlbest)
- Spin.js can now be required on the server. See PR #218. (Thanks David McCabe)
Version 2.0.1 (24.04.2014)
- Position is now set even if now target is given. See issue #218. (Thanks tablatronix)
Version 2.0.0 (13.03.2014)
- The Spinner is now absolutely positioned at top: 50% left: 50% by default. (Thanks steelywing)
Version 1.3.3 (24.12.2013)
- Grunt-based build and a master branch. See issue #189.
Version 1.3.2 (26.8.2013)
- Workaround for q regression in Chrome Canary. See issue #168.
Version 1.3.1 (19.8.2013)
- Support for multi-colored spinners. (Thanks ranyefet)
Version 1.3.0 (2.4.2013)
- UMD pattern to support AMD and CommonJS module loaders
- Use strict mode
- Bundled the jQuery plugin
- Added an option to control the spinning direction. See PR #126.
Version 1.2.8 (28.1.2013)
- Removed an unnecessary var. See issue #78.
Version 1.2.7 (2.10.2012)
- Added an option to set the position property. See issue #98.
- Added a trailing semicolon to support concatenation tools that don't know about ASI.
Version 1.2.6 (30.08.2012)
- Added an option to set the border-radius. See issue #93.
- Fix for Opera 12. See issue #87.
- Fix for IE. See issue #77.
- Fixed an issue with very wide target elements. See issue #78.
Version 1.2.5 (22.03.2012)
- Fixed a bug that prevented the VML from being displayed when Modernizr or html5shiv was used.
- Added a rotate option. See issue #60.
- The constructor property is now preserved. See issue #61.
Version 1.2.4 (28.02.2012)
- Added new config options: top, left, zIndex and className.
Version 1.2.3 (30.01.2012)
Version 1.2.2 (8.11.2011)
- Fixed a cross-domain issue with the dynamically created stylesheet. See issue #36.
Version 1.2.1 (5.10.2011)
- Added a sanity check. See issue #31.
Version 1.2 (16.9.2011)
- Calling
spin()
now invokesstop()
first. See issue #28. - Added a workaround for the IE negative margin bug. See issue #27.
- The
new
operator is now optional. See issue #14. - Improved accessibility by adding
role="progressbar"
.
Version 1.1 (6.9.2011)
- Fixed a bug where the animation occasionally got out of sync in Mobile Safari and Android's built-in WebKit.
- Fixed a bug where the spinner was misplaced when the target element had a non-zero padding.
- Optimized the code for gzip compression. While the minified version got slightly larger, the zipped version now only weighs 1.7K.
Version 1.0 (16.8.2011)
- Initial release
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.