A simple but powerful progress bar indicator for web.
npm install --save progress.js
And include it in your project:
varProgress=require('progress.js')Clone or install this project to your local machine, and include lib/progress.min.js to your HTML file.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Progress.js Demo</title><scriptsrc="/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:
constdefaultOption={// element which the progress bar element will append toelement: body,// progress bar's positionposition: '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:
constprogress=newProgress({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:
constprogress=newProgress()progress.start()Stop increase the progress bar.
Parameters: none
Returns:
- Current Progress instance
Examples:
constprogress=newProgress()conststopBtn=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:
constprogress=newProgress()constfinishBtn=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:
constprogress=newProgress()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:
constprogress=newProgress()constchangeColorBtn=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:
constprogress=newProgress()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:
constprogress=newProgress()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