nanobar

Very lightweight progress bars. No jQuery

Github stars Tracking Chart

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

Overview

Name With Ownerjacoborus/nanobar
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 1)
Platform
License:MIT License
Release Count12
Last Release Namev0.4.2 (Posted on 2016-05-03 20:06:52)
First Release Namev0.0.1 (Posted on 2014-02-23 17:31:00)
Created At2014-02-23 11:55:14
Pushed At2020-03-01 17:11:34
Last Commit At2017-06-07 19:31:27
Stargazers Count2.8k
Watchers Count56
Fork Count278
Commits Count63
Has Issues Enabled
Issues Count39
Issue Open Count8
Pull Requests Count11
Pull Requests Open Count6
Pull Requests Close Count8
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private
To the top