spin.js

Example

















Features

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

Installation

Run npm install spin.js (recommended), or save the spin.js file in your repo.

Note: do not use a <script> tag directly referencing the spin.js file on this website. Doing this is likely to break your app whenever a major new version is released.

Usage

import {Spinner} from 'spin.js';

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', // CSS color or array of colors
  fadeColor: 'transparent', // CSS color 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 in IE 9
  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: none, // Box-shadow for the lines
  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.

Bundling

Not all browsers support native ES6 module imports yet, so it is recommended to use a module bundler such as Webpack or Rollup to create a production-ready code bundle.

Supported browsers

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

Changes

See https://github.com/fgnass/spin.js/releases

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.