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