nanobar

WebJar for nanobar

License	MIT
GroupId	org.webjars.bower
ArtifactId	nanobar
Last Version	0.4.2
Release Date	Jul 8, 2016
Type	jar
Description	nanobar WebJar for nanobar
Project URL	http://webjars.org
Source Code Management	https://github.com/jacoborus/nanobar

Download nanobar

Filename	Size
nanobar-0.4.2.pom
nanobar-0.4.2.jar	18 KB
nanobar-0.4.2-sources.jar	22 bytes
nanobar-0.4.2-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/nanobar/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>nanobar</artifactId>
    <version>0.4.2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/nanobar/
implementation 'org.webjars.bower:nanobar:0.4.2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/nanobar/
implementation ("org.webjars.bower:nanobar:0.4.2")

Apache Buildr

'org.webjars.bower:nanobar:jar:0.4.2'

Apache Ivy

<dependency org="org.webjars.bower" name="nanobar" rev="0.4.2">
  <artifact name="nanobar" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='nanobar', version='0.4.2')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "nanobar" % "0.4.2"

Leiningen

[org.webjars.bower/nanobar "0.4.2"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

Very lightweight progress bars (~699 bytes gzipped).

Compatibility: iE7+ and the rest of the world

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

Versions

Version
0.4.2 Jul 8, 2016