Repository files navigation

Very lightweight progress bars (~699 bytes gzipped).

Compatibility: iE7+ and the rest of the world

Seenanobar.jacoborus.codes

Download and extract thelatest release or install with package manager:

Bower:

$ bower install nanobar

npm:

$ npm install nanobar

Linknanobar.js from your html file

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

or require it:

varNanobar=require('path/to/nanobar');

varnanobar=newNanobar(options);

options

• id<String>: (optional) id fornanobar div
• classname<String>: (optional) class fornanobar div
• target<DOM Element>: (optional) Where to put the progress bar,nanobar will be fixed to top of document if notarget is passed

Resize the bar withnanobar.go(percentage)

arguments

• percentage<Number> : percentage width of nanobar

Create bar

varoptions={classname:'my-class',id:'my-id',target:document.getElementById('myDivId')};varnanobar=newNanobar(options);//move barnanobar.go(30);// size bar 30%nanobar.go(76);// size bar 76%// size bar 100% and and finishnanobar.go(100);

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 ;)

© 2016jacoborus - Released underMIT License