nanobar.js

Very lightweight progress bars. (699 gzipped bytes of vanilla js)

For iE7+ and the rest of the world

Customize nanobar with CSS

Example

var options = {
  classname: 'my-class',
  id: 'my-id',
  target: document.getElementById('myDivId')
};

var nanobar = new Nanobar( options );

// move bar
nanobar.go( 30 ); // size bar 30%
nanobar.go( 76 ); // size bar 76%

// size bar 100% and and finish
nanobar.go(100);

Installation

Download and extract the latest release or install with package manager:

Bower:

$ bower install nanobar

npm:

$ npm install nanobar

Usage

Link nanobar.js from your html file

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

or require it:

var Nanobar = require('path/to/nanobar')

Generate progressbar

var nanobar = new Nanobar( options );

options

id <String>: id for nanobar div container
classname <String>: classname for nanobar div container
target <DOM Element>: optional) Where to put the progress bar, nanobar will be fixed to top of document if no target is passed

Move bar

Resize the bar with nanobar.go(percentage)

arguments

percentage <Number> : percentage of progress