Loader loader.js

Animation for visual indication of waiting time that can be customized to have many appearances.

Usage

Via JavaScript

Call the loader control via JavaScript:

$('#myLoader').loader();

Via data-attributes

To enable the loader control without writing JavaScript, add data-initialize="loader" to the .loader element that you wish to initialize. Such elements that exist when $.ready() executes will be initialized.

Markup

Simply place class="loader" on a div.

<div class="loader" id="myLoader" data-initialize="loader"></div>

Methods

.loader('destroy')

Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.

.loader('next');

Increments the loader animation to the next frame

.loader('pause');

Pauses the loader animation at the current frame.

.loader('play');

Plays the loader animation, resuming it if paused.

.loader('previous');

Decrements the loader animation to the previous frame.

.loader('reset');

Resets the loader animation to the beginning frame.

Examples

Animation for visual indication of waiting time that can be customized to have many appearances.

<div class="loader" data-initialize="loader"></div>

Starting frame

Use the data-frame attribute to set the initial animation frame (defaults to 1). Additionally, this attribute can be modified at any time to set the current frame.

<div class="loader" id="myLoader" data-initialize="loader" data-frame="5"></div>

Controlling speed

Use the data-delay attribute to alter animation speed (defaults to 150).

<div class="loader" id="myLoader2" data-initialize="loader" data-delay="500"></div>

Animation range

Use the data-begin and data-end attributes to control at which frames the animation begins and ends, respectively. (Defaults are 1 and 8)

<div class="loader" id="myLoader3" data-initialize="loader" data-begin="3" data-end="6"></div>