krisk/rsup-progress

A simple progress bar with promises support (1.3kb)

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 is document.body.
position - Position to be placed. Default is top (There are top, bottom, none).
maxWidth - Maximum width before completion. Default is 99.8%.
height - Progress bar height. Default is 4px.
duration - Duration time to reach maxWidth. Default is 60000(ms).
hideDuration - Duration time to hide when completion. Default is 400(ms).
zIndex - CSS z-index property. Default is 9999.
className - Progress bar class attribute.
color - Progress bar color. Default is #ff1a59.
timing - CSS animation timing function. Default is cubic-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

krisk / rsup-progress