Lightweight Slim Javascript Progress Bar – nanobar

Category: Javascript , Loading , Recommended | June 13, 2018
Author: jacoborus
Views Total: 1,181 views
Official Page: Go to website
Last Update: June 13, 2018
License: MIT


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



  • Bugfix

You Might Be Interested In:

One thought on “Lightweight Slim Javascript Progress Bar – nanobar

Leave a Reply