Create a progress bar using nanobar js

Nanobar is a small js plugin that can be used to create dynamic progress bars. In this post I’ll show you how to use the js and set up a simple progress bar.

JS

Nanobar has a few options that allow you to customize your progress bar:

  • classname: will add the given class to the div containing the bar element
  • id: will add a class to the div containing the bar element
  • target: this is where the progress bar will be placed. If not set, the bar will be added to the top of your page.

var options = {
  classname: 'nanobar-red',
  id: 'nano-demo-bar',
  target: document.getElementById('demo')
};

var nanobar = new Nanobar( options );

nanobar.go( 30 );

var el = document.getElementById('add-50');

el.addEventListener('click', function(e){
	e.preventDefault();

	nanobar.go(50);

}, false);

 

CSS

Nanobar will embed a small amount of CSS onto your page, but you can easily override it.

#nano-demo-bar.nanobar { height: 20px; background-color: #e5e5e5; }

#nano-demo-bar .bar{ background-color: #cc0035; } 

 

Example:

set bar to 50%

Download

Head over to http://nanobar.jacoborus.codes for more examples and download instructions.