https://github.com/jacoborus/nanobar

Very lightweight progress bars. No jQuery
https://github.com/jacoborus/nanobar

minimalist progressbar

Last synced: 25 days ago
JSON representation

Very lightweight progress bars. No jQuery

• Host: GitHub
• URL: https://github.com/jacoborus/nanobar
• Owner: jacoborus
• License: mit
• Created: 2014-02-23T11:55:14.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2020-03-01T17:11:34.000Z (over 4 years ago)
• Last Synced: 2024-10-01T17:23:33.013Z (about 1 month ago)
• Topics: minimalist, progressbar
• Language: JavaScript
• Homepage: http://nanobar.jacoborus.codes
• Size: 93.8 KB
• Stars: 2,841
• Watchers: 56
• Forks: 268
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-javascript-cn - 官网
• awesome-loading-indicators - nanobar - Very lightweight progress bars. No jQuery. (JavaScript)
• awesome-javascript - nanobar - Very lightweight progress bars. No jQuery - ★ 2704 (Loading Status)
• awesome-frontend-libraries - nanobar

README

        
![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](https://badge.fury.io/js/nanobar.svg)](https://www.npmjs.com/package/nanobar) [![Bower version](https://img.shields.io/bower/v/nanobar.svg?maxAge=2592000)](https://github.com/jacoborus/nanobar/releases)

## Demo

See [nanobar.jacoborus.codes](http://nanobar.jacoborus.codes)

## Installation

Download and extract the [latest release](https://github.com/jacoborus/nanobar/archive/master.zip) or install with package manager:

[Bower](http://bower.io/):

```

$ bower install nanobar

```

[npm](https://www.npmjs.org/package/nanobar):

```

$ npm install nanobar

```

## Usage

### Load

Link `nanobar.js` from your html file

```html

```

or require it:

```js

var Nanobar = require('path/to/nanobar');

```

### Generate progressbar

```js

var nanobar = new Nanobar( options );

```

**options**

- `id` ``: (optional) id for **nanobar** div

- `classname` ``: (optional) class for **nanobar** div

- `target` ``: (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` `` : percentage width of nanobar

## Example

Create bar

```js

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:

```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](https://github.com/jacoborus) - Released under [MIT License](https://raw.github.com/jacoborus/nanobar/master/LICENSE)