throbber.js

Example 01

The most basic form of throbber with default options.

var throb = Throbber();
throb.appendTo( document.getElementById( 't1' ) );
throb.start();

Example 02

Passing a number will set dimensions and adjust other settings according to it’s size. You can also chain methods.

Throbber(20)
    .appendTo( document.getElementById( 't2' ) )
    .start();

Example 03

Options are passed in the constructor. Methods can be attached to the throbber that was returned.

Start/Stop

var throb = Throbber({
    color: 'yellow',
    padding: 30,
    size: 40,
    fade: 200,
    clockwise: false
}).appendTo( document.getElementById( 't3' ) ).start();

document.getElementById('b3').onclick = function() {
    throb.toggle();
};

Example 04

Throbber.js uses HTML5 canvas that some older browsers do not support (IE<9). Throbber.js fails silently when it’s not supported, and you can pass a fallback gif that will be used instead:

Start Stop

var throb = Throbber({
    size: 32,
    fade: 1000, // fade duration, will also be applied to the fallback gif
    fallback: 'ajax-loader.gif',
    rotationspeed: 0,
    lines: 14,
    strokewidth: 1.8,
    alpha: 0.4 // this will also be applied to the gif
}).appendTo( document.getElementById( 't4' ) ).start();

document.getElementById('b4-1').onclick = function() {
    throb.start();
};
document.getElementById('b4-2').onclick = function() {
    throb.stop();
};

Options

size                  // diameter of loader
rotationspeed         // rotation speed (1-10)
clockwise             // direction, set to false for counter clockwise
color                 // color of the spinner, can be any CSS compatible value
fade                  // duration of fadein/out when calling .start() and .stop()
fallback              // a gif fallback for non-supported browsers (IE < 8)
alpha                 // global alpha (0-1), can also be defined using rgba color
fps                   // frames per second
padding               // diameter of clipped inner area
strokewidth           // width of the lines
lines                 // number of lines

Methods

Throbber( opts )      // constructor - intializes a throbber and sets options
.appendTo( element )  // appends the throbber to any html element
.start()              // starts spinning
.stop()               // stops spinning
.toggle()             // toggles spinning
.configure( opts )    // sets options