AjaxLoader.js

Intro

Javascript library for displaying animated waiting indicator without images using symbols such as "|", "_", etc.

Features:

• Animation speed can be customized
• Symbols and their count can be customized
• Can restore previous state on animation stop

Source code is available at Github

Licensed under the MIT License, © 2016 Mark Rolich

JSDoc

new AjaxLoader(elem_id, options)

Parameters:

Methods

pause()

Pause the loader

start()

Start the loader

stop()

Stop the loader

• Throw an exception if DOM element id is undefined or DOM element not found

Examples

Using defaults:

var loader = new AjaxLoader('loader');

document.getElementById('start-loader-btn').addEventListener('click', loader.start);
document.getElementById('pause-loader-btn').addEventListener('click', loader.pause);
document.getElementById('stop-loader-btn').addEventListener('click', loader.stop);

Set keep_value to true, symbol to "|", append value "Please wait", speed - 100ms, symbols count - 10:

var loader1 = new AjaxLoader('loader1', {
    keep_value: true,
    symbol: "|",
    append_value: "Please wait ",
    speed: 50,
    count: 10
});

document.getElementById('start-loader1-btn').addEventListener('click', loader1.start);
document.getElementById('pause-loader1-btn').addEventListener('click', loader1.pause);
document.getElementById('stop-loader1-btn').addEventListener('click', loader1.stop);

Same as above, symbol set to full block - "\u2588"

var loader1 = new AjaxLoader('loader2', {
    keep_value: true,
    symbol: "\u2588",
    append_value: "Please wait ",
    speed: 50,
    count: 10
});

document.getElementById('start-loader2-btn').addEventListener('click', loader2.start);
document.getElementById('pause-loader2-btn').addEventListener('click', loader2.pause);
document.getElementById('stop-loader2-btn').addEventListener('click', loader2.stop);

Browser Compatibility

• IE >= 9
• Chrome
• Firefox
• Safari