Awesome
Very lightweight progress bars (~699 bytes gzipped).
Compatibility: iE7+ and the rest of the world
Demo
Installation
Download and extract the latest release or install with package manager:
$ 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 notarget
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 );
//move bar
nanobar.go( 30 ); // size bar 30%
nanobar.go( 76 ); // size bar 76%
// size bar 100% and and finish
nanobar.go(100);
Customize bars
Nanobar injects a style tag in your HTML head. Bar divs has class .bar
, and its containers .nanobar
, so you can overwrite its values.
Default css:
.nanobar {
width: 100%;
height: 4px;
z-index: 9999;
top:0
}
.bar {
width: 0;
height: 100%;
transition: height .3s;
background:#000;
}
You should know what to do with that ;)
<br><br>
© 2016 jacoborus - Released under MIT License