https://github.com/djyde/ToProgress

A lightweight top progress bar
https://github.com/djyde/ToProgress

Last synced: 4 months ago
JSON representation

A lightweight top progress bar

• Host: GitHub
• URL: https://github.com/djyde/ToProgress
• Owner: djyde
• Created: 2015-06-13T14:32:17.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-11-14T10:12:46.000Z (over 6 years ago)
• Last Synced: 2024-02-29T14:32:20.875Z (4 months ago)
• Language: JavaScript
• Homepage: http://djyde.github.io/ToProgress
• Size: 33.2 KB
• Stars: 524
• Watchers: 16
• Forks: 52
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Lists

• awesome-stars - djyde/ToProgress - A lightweight top progress bar (JavaScript)
• awesome-stars - ToProgress - A lightweight top progress bar (JavaScript)
• awesome-stars - ToProgress - A lightweight top progress bar (JavaScript)

README

        
# ToProgress

[![NPM version](https://img.shields.io/npm/v/toprogress.svg?style=flat-square)](https://www.npmjs.com/package/toprogress)

[![npm](https://img.shields.io/npm/dt/toprogress.svg)](https://www.npmjs.com/package/toprogress)

[![npm](https://img.shields.io/npm/l/toprogress.svg)](https://www.npmjs.com/package/toprogress)

A lightweight (2.2 KB), no-dependency top progress bar library.

# Demo

http://djyde.github.io/ToProgress

# Screenshot

#### Desktop

![desktop](http://ww4.sinaimg.cn/large/62580dd9gw1et3i1t9amjj218b0q5juw.jpg)

#### Mobile

![mobile](http://ww2.sinaimg.cn/large/62580dd9gw1et41eqm2usg20f00qo7if.gif)

# Quick Start

```JS

var options = {

  color: '#EEE',

  duration: 0.2,

  height: '2px'

}

var topbar = new ToProgress(options);

```

# Support

* IE >= 10

* Chrome

* Firefox

* Safari

# Use cases

If you are using ToProgress.js in production, just tell us.

# API

### new ToProgress(options[,selector])

* options

  * **id** - the id of auto-created progress bar element

  * **color** - progress bar color

  * **height** - progress bar height 

  * **duration** - increase duration (seconds)

  * **position** - the progress bar position. `top` or `bottom`

* **selector** - valid css selector, if is defined, progress bar will be put on the top of the element. Only find the first element.

### .increase(progress[,callback])

* **progress** - percentage number

### .decrease(progress[,callback])

* **progress** - percentage number

### .setProgress(progress[,callback])

* **progress** - percentage number

### .reset([,callback])

### .finish([,callback])

### .getProgress()

return current progress (percentage number)

### .show()

### .hide()

# License

MIT License