Very lightweight progress bars (~630 bytes gzipped). No jQuery needed.

Compatibility: iE7+ and the rest of the world

Demo

See nanobar.micronube.com

Installation

Download and extract the last release from here or install with package manager:

component(1):

$ component install jacoborus/nanobar

Bower:

$ bower install nanobar

npm:

$ npm install nanobar

Usage

Load

Link nanobar.js from your html file

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

or require it with Browserify or Component:

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

Generate progressbar

var nanobar = new Nanobar( options );

options

• bg <String>: (optional) background css property, '#000' by default
• id <String>: (optional) id for nanobar div
• target <DOM Element>: (optional) Where to put the progress bar, nanobar will be fixed to top of document if target is null

Move bar

Resize the bar with nanobar.go(percentage)

arguments

• percentage <Number> : percentage width of nanobar

Example

Create bar

var options = {
	bg: '#acf',
	// leave 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);

---

© 2014 jacoborus - Released under MIT License