🌜
🌞
nanobar

nanobar

v0.4.2

Very lightweight js progress bars (for browsers)

npm install nanobar

README

nanobar

Very lightweight progress bars (~699 bytes gzipped).

Compatibility: iE7+ and the rest of the world

npm version Bower version

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 div
  • classname <String>: (optional) class for nanobar div
  • target <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 );

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




© 2016 jacoborus - Released under MIT License

General

License
MIT
Typescript Types
None found
Tree-shakeable
No

Popularity

GitHub Stargazers
2,863
Community Interest
3,195
Number of Forks
282

Maintenance

Commits
10/219/2201
Last Commit
Jun 7, 2017
Open Issues
8
Closed Issues
30
Open Pull Requests
6
Closed Pull Requests
8

Versions

Versions Released
10/219/2201
Latest Version Released
May 3, 2016
Current Tags
latest0.4.2

Dependencies

Dependencies (0)
Dev Dependencies (2)

Contributors

jacoborus
jacoborus
Commits: 42
mikroskeem
mikroskeem
Commits: 3
mstubinis
mstubinis
Commits: 1
sloria
sloria
Commits: 1
hallas
hallas
Commits: 1
Onatolich
Onatolich
Commits: 1
bencevans
bencevans
Commits: 1
kkirsche
kkirsche
Commits: 1
PhilCorcoran
PhilCorcoran
Commits: 1