skt-t1-byungi / Rsup Progress
Programming Languages
Projects that are alternatives of or similar to Rsup Progress
A simple progress bar with promises support
The progress bar is initially fast, but doesn't end as it slows down.
Call the end
function to complete.
This gives users a natural animation without the exact percentage of progress.
https://skt-t1-byungi.github.io/rsup-progress/
Example
Example using start
, end
method.
progress.start()
fetch('/data.json').then(response => {
progress.end()
})
Using promise
method.
const response = await progress.promise(fetch('/data.json'))
Install
npm i rsup-progress
import Progress from 'rsup-progress'
UMD
<script src="https://unpkg.com/rsup-progress"></script>
<script>
const progress = new RsupProgress();
</script>
Browser ESM
<script type="module">
import Progress from 'https://unpkg.com/rsup-progress/dist/index.js';
const progress = new Progress()
</script>
API
new Progress([options])
Create instance.
const progress = new Progress({
height: 5,
color: '#33eafd',
})
options
-
container
- Container element to append a progress bar. Default isdocument.body
. -
position
- Position to be placed. Default istop
(There aretop
,bottom
,none
). -
maxWidth
- Maximum width before completion. Default is99.8%
. -
height
- Progress bar height. Default is4px
. -
duration
- Duration time to reach maxWidth. Default is60000
(ms). -
hideDuration
- Duration time to hide when completion. Default is400
(ms). -
zIndex
- CSS z-index property. Default is9999
. -
className
- Progress barclass
attribute. -
color
- Progress bar color. Default is#ff1a59
. -
timing
- CSS animation timing function. Default iscubic-bezier(0,1,0,1)
.
progress.setOptions(options)
Change options.
progress.setOptions({
color: 'red',
className: 'class1 class2'
})
progress.isInProgress
Returns whether it is in progress or not.
console.log(progress.isInProgress) // => false
progress.start()
console.log(progress.isInProgress) // => true
progress.start()
Start the progress bar.
progress.end([immediately])
Complete the progress bar. If immediately
is true, remove the element immediately.
progress.promise(promise[, delay])
Call the start and end functions automatically by promise.
const response = await progress.promise(fetch('/data.json'))
If delay
is given, it starts after a delay.
progress.promise(delay(500), 200) // => It starts 200ms later.
If the promise ends before the delay, the progress bar will not start.
progress.promise(delay(500), 600) // => Progress bar does not appear.
It is useful when avoiding the progressbar flash that occurs when the promise is short.
Tips
Force the Progressbar animation.
If you call the end function before the animation starts, the progressbar does not appear. The animation can be forced with the following trick.
const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
progress.promise(Promise.all([yourPromise, delay(100)])) // => `delay(100)` prevents a quick end.
License
MIT License ❤️📝 skt-t1-byungi