The most basic form of throbber with default options.
var throb = Throbber();
throb.appendTo( document.getElementById( 't1' ) );
throb.start();
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();
Options are passed in the constructor. Methods can be attached to the throbber that was returned.
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();
};
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:
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();
};
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
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