Generate spinning activity indicators in JavaScript

Spin.js is a nice library for generating spinning activity indicators in JavaScript. Easy to use, no dependencies.

Spin.js – activity indicators in JavaScript

Try spin.js in you projects – an animated CSS3 loading spinner, which has the VML fallback for IE!

Key features:

– no external CSS and images

– no dependencies (jQuery is supported, but not required)

– resolution independent

– highly configurable

– VML as fallback in old IE versions

– uses @keyframe animations, falling back to setTimeout()

– works in all major browsers, including IE6, as well on mobile

Create and use the spinning activity indicators in JavaScript
Create and use the spinning activity indicators in JavaScript

Usage

Just include the library and start the spinning around:

new Spinner({color:'#fff', lines: 12}).spin(target);

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

Options:

var opts = {
  lines: 13 // The number of lines to draw
    , length: 28 // The length of each line
    , width: 14 // The line thickness
    , radius: 42 // The radius of the inner circle
    , scale: 1 // 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: 60 // Afterglow percentage
    , fps: 20 // Frames per second
    , 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: false // 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.

Manual insertion of the spinner into the DOM is easy, for example:

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

Spin.js does not require jQuery, but we can use this framework if we want.

License: MIT

Project home page and demo:

http://spin.js.org

Get the activity indicators library from GitHub:

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

You may also like:

A percentage loader jQuery plugin

ProBars – jQuery animated progress bars plugin

Animated circular progress bars with jQuery

Create a beautiful password strength meter

Cool loading animations with CSS

Enjoy!

Share:Share on Facebook2Share on Google+1Tweet about this on TwitterShare on LinkedIn2Pin on Pinterest1