| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Name | Name | Last commit date | ||
|---|---|---|---|---|
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:
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:
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:
Returns:
Example:
const progress = new Progress()
progress.start()Stop increase the progress bar.
Parameters: none
Returns:
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:
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:
Returns:
Examples:
const progress = new Progress()
progress.start()
setTimeout(function () {
progress.set(50)
}, 1000)Change the progress bar's color.
Parameters:
Returns:
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: String Target event name. Supported events are:
fn: Function Function that will be called when the event is fired.
context: Object, optional Callback function's context.
Returns:
Examples:
const progress = new Progress()
progress.on('progress', function () {
console.log('in progress')
})
progress.start()Manually trigger an event.
Parameters:
eventName: String Event name to triggered.
argN: Any Arguments to pass to the callback function.
Returns:
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)
})MIT
| Back | FazBrowse Home | New Git URL |