Very lightweight progress bars (~699 bytes gzipped).
Compatibility: iE7+ and the rest of the world
Demo
See nanobar.jacoborus.codes
Installation
Download and extract the latest release or install with package manager:
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:
var Nanobar = require('path/to/nanobar');
Generate progressbar
var nanobar = new Nanobar( options );
options
id
<String>
: (optional) id for nanobar divclassname
<String>
: (optional) class for nanobar divtarget
<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 width of nanobar
Example
Create bar
var options = {
classname: 'my-class',
id: 'my-id',
target: document.getElementById('myDivId')
};
var nanobar = new Nanobar( options );
nanobar.go( 30 );
nanobar.go( 76 );
nanobar.go(100);
© 2016 jacoborus - Released under MIT License