Very lightweight progress bars. No jQuery

Github stars Tracking Chart

![nanobar](https://raw.githubusercontent.com/jacoborus/nanobar/master/brand/nanobar.png 'nanobar logo')

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

Overview

Primary LanguageJavaScript
LanguageJavaScript
LicenseMIT License
Last Release Namev0.4.2
First Release Namev0.0.1
Last Release At2016-05-03 20:06:52
First Release At2014-02-23 17:31:00
Last Commit At2017-06-07 19:31:27
Created At2014-02-23T11:55:14
Pushed At2020-03-01T17:11:34
Commits Count63
Watchers Count56
Name With Ownerjacoborus/nanobar
Fork Count282
Stargazers Count2.9k
Issues Count38
Issue Open Count8
Release Count12
Language Count1
Pull Requests Count11
Pull Requests Open Count8
Pull Requests Close Count6
Has Issues Enabled
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private
To the top