Slim AJAX Loading Indicator Library – microbar

microbar is a very small and easy to use JavaScript library for generating a top slim progress bar to indicate the ajax loading status as you seen on Youtube and Github.

Installation:

# NPM
$ npm install microbar --save

How to use it:

Include the micrbar.js library right before the closing body tag.

<script src="microbar.js"></script>

Override the default settings.

var settings = {
    // percentage
    percentage: 50,
    // background color
    color: 'red',
    // animation speed
    speed: 2,
    // target container
    target: 'myContainer'
    
};

Initialize the AJAX loading indicator.

var bar = new microbar( settings);

API methods.

// Move bar forward
bar.moveTo(80);
// Get color of progress bar
bar.getColor();
// Set color of progress bar
bar.setColor('#141414');
// Get speed of progress bar
bar.getSpeed();
// Set speed of progress bar
bar.setSpeed(5);

Changelog:

v0.1.7 (08/10/2018)

• rewritten in ES6