Popularity
5.0
Stable
Activity
0.0
Stable
2,823
60
287

Description

Very lightweight progress bars (~699 bytes gzipped).

Compatibility: iE7+ and the rest of the world

Code Quality Rank: L5
Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: Loading Status     HTML     Css3     Loader     Js     Progress Bar    
Latest version: v0.4.2

nanobar alternatives and similar libraries

Based on the "Loading Status" category.
Alternatively, view nanobar alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of nanobar or a related project?

Add another 'Loading Status' Library

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


*Note that all licence references and agreements mentioned in the nanobar README section above are relevant to that project's source code only.