Lightweight Slim Javascript Progress Bar – nanobar

A super lightweight progress bar built on top of javascript and CSS3 transitions to create a slim indicator for content loading status.

How to use it:

Load the nanobar.js at the end of the document.

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

The sample javascript to manipulate the progress bar.

<script src="../nanobar.js"></var options = {
    bg: '#acf',
    // left target blank for global nanobar
    target: document.getElementById('myDivId'),
    // id for new nanobar
    id: 'mynano'
};
var nanobar = new Nanobar( options );
//move bar
nanobar.go( 30 ); // size bar 30%
// Finish progress bar
nanobar.go(100);script>

Changelog:

06/13/2018

• Bugfix