A lightweight (1KB) progress bar with promise support

The progress bar starts quickly but decelerates over time. Invoke the end function to finish the animation, providing a natural user experience without an exact percentage of progress.

https://skt-t1-byungi.github.io/rsup-progress/

Example

Using start and end methods.

1progress.start()
2
3fetch('/data.json').then(response => {
4    progress.end()
5})

Using promise method.

1const response = await progress.promise(fetch('/data.json'))

Install

1npm install rsup-progress

1import { Progress } from 'rsup-progress'

Browser ESM

1<script type="module">
2    import { Progress } from 'https://unpkg.com/rsup-progress/dist/esm/index.js'
3    const progress = new Progress()
4</script>

API

new Progress(options?)

Create an instance.

1const progress = new Progress({
2    height: 5,
3    color: '#33eafd',
4})

options

• height - Progress bar height. Default is 4px.
• className - class attribute for the progress bar.
• color - Progress bar color. Default is #ff1a59.
• container - Element to append a progress bar. Default is document.body.
• maxWidth - Maximum width before completion. Default is 99.8%.
• position - Position to be placed. Default is top (There are top, bottom, none).
• duration - Time to reach maxWidth. Default is 60000(ms).
• hideDuration - Time to hide when completion. Default is 400(ms).
• zIndex - CSS z-index property. Default is 9999.
• timing - CSS animation timing function. Default is cubic-bezier(0,1,0,1).

progress.setOptions(options)

Change the options.

1progress.setOptions({
2    color: 'red',
3    className: 'class1 class2',
4})

progress.isInProgress

Check whether the progress bar is active.

1console.log(progress.isInProgress) // => false
2
3progress.start()
4
5console.log(progress.isInProgress) // => true

progress.start()

Activate the progress bar.

progress.end(immediately = false)

Complete the progress bar. If immediately is set to true, the element is removed instantly.

progress.promise(promise, options?)

Automatically call start and end methods based on the given promise.

1const response = await progress.promise(fetch('/data.json'))

options.min

Minimum time to display and maintain the progress bar. Default is 100 ms. If 0 is set and the promise is already resolved, the progress bar won't appear.

1progress.promise(Promise.resolve(), { min: 0 }) // => Progress bar does not appear.

options.delay

If options.delay is set, the progress bar will start after the specified delay.

1progress.promise(delay(500), { delay: 200 }) // => It starts 200ms later.

If the promise resolves before the delay, the progress bar won't appear.

1progress.promise(delay(500), { delay: 600 }) // => Progress bar does not appear.

This is useful to prevent "flashing" of the progress bar for short-lived promises.

options.waitAnimation

If options.waitAnimation is set, the returned promise waits for the hide animation to complete.

1await progress.promise(fetch('/data.json'), { waitAnimation: true })
2
3alert('Complete!')

Useful for immediate actions like alert or confirm. Default is false.

License

MIT License ❤️📝 skt-t1-byungi