The nanobar from chrsr

nanobar's Introduction

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

Compatibility: iE7+ and the rest of the world

Demo

Installation

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

$ 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

Increase bar

Increase the bar with nanobar.increase(percentage)

arguments

percentage <Number> : percentage to increase the 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%

//increase bar
nanobar.increase( 10 ); // increase bar by 10%

// Finish progress bar
nanobar.go(100);