Description: An animated CSS activity indicator with VML fallback.

# spin.js

spin.js spin.min.js

## Example

Lines:
Length:
Width:
Radius:
Scale:
Corners:
Opacity:
Rotate:
Direction:
Speed:
Trail:
↕:
↔:
Shadow:
Hwaccel:
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings.

## 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)

- Hardware acceleration is now disabled by default. See issue #47 and issue #41.

### 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 invokes `stop()` 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.