A simple but powerful progress bar indicator for web.
npm install --save progress.js
And include it in your project:
var Progress = require('progress.js')
Clone or install this project to your local machine, and include lib/progress.min.js to your HTML file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Progress.js Demo</title> <script src="/path/to/progress.min.js"></script> <script> // place to create a Progress instance </script> </head> <body> </body> </html>
Creating an uploader instance.
Parameters:
optionsA configuration object. Default options are:
const defaultOption = { // element which the progress bar element will append to element: body, // progress bar's position position: 'top', // progress bar's color, accepts two kinds of format: // `#ffffff` and `rgb(255,255,255)` color: 'rgb(2, 141, 192)' }
Returns:
- Progress instance
Examples:
const progress = new Progress({ element: document.querySelector('.progress'), color: 'rgb(0,0,0)' })
Start loading the progress bar. Progress bar will increase automatically.
Parameters:
- algorithm:
StringProgress bar increase algorithm. Supported algorithm is(will add more in the future):linear
Returns:
- Current Progress instance
Example:
const progress = new Progress() progress.start()
Stop increase the progress bar.
Parameters: none
Returns:
- Current Progress instance
Examples:
const progress = new Progress() const stopBtn = document.querySelector('button') progress.start() stopBtn.addEventListener('click', function () { progress.stop() })
Finish loading. Progress bar will immediately increase to 100%, and fade away slowly.
Parameters: none
Returns:
- Current Progress instance
Examples:
const progress = new Progress() const finishBtn = document.querySelector('button') progress.start() finishBtn.addEventListener('click', function () { progress.end() })
Set the current progress bar's percentage.
Parameters:
- percentage:
NumberProgress bar's percentage value. The valid value is between 0 and 100.
Returns:
- Current Progress instance
Examples:
const progress = new Progress() progress.start() setTimeout(function () { progress.set(50) }, 1000)
Change the progress bar's color.
Parameters:
- Color:
StringTarget color. Color format can be a hex value or a RGB value
Returns:
- Current Progress instance
Examples:
const progress = new Progress() const changeColorBtn = document.querySelector('button') progress.start() changeColorBtn.addEventListener('click', function () { progress.setColor('#234567') })
Listen to Progress instance's event.
Parameters:
-
eventName:
StringTarget event name. Supported events are:- progress: will be fired when the progress bar is loading
- start: will be fired when the progress bar starting loading
- stop: will be fired when stopping loading
- set: will be fired when manually setting the percentage
- end: will be fired when progress is ending
- setColor: will be fired when setting color
-
fn:
FunctionFunction that will be called when the event is fired. -
context:
Object, optional Callback function's context.
Returns:
- Current Progress instance
Examples:
const progress = new Progress() progress.on('progress', function () { console.log('in progress') }) progress.start()
Manually trigger an event.
Parameters:
-
eventName:
StringEvent name to triggered. -
argN:
AnyArguments to pass to the callback function.
Returns:
- Current Progress instance
Examples:
const progress = new Progress() progress.start() progress.on('progress', function (percentage) { if (percentage == 50) { progress.trigger('customEvent', percentage) } }) progress.on('customEvent', function (arg) { console.log(arg) })
- percent Current progress value. The value in between 0 and 100.
- id Current Progress instance id.
- status
Current Progress instance status, value can be
waiting,loading. - options Progress instance's configuration object.
- Clone this project to your local machine.
- Run
npm install - Run
npm start
MIT