skt-t1-byungi / rsup-progress Goto Github PK

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/

Using start and end methods.

progress.start()

fetch('/data.json').then(response => {
    progress.end()
})

Using promise method.

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

npm install rsup-progress

import { Progress } from 'rsup-progress'

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

Create an instance.

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

• 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).

Change the options.

progress.setOptions({
    color: 'red',
    className: 'class1 class2',
})

Check whether the progress bar is active.

console.log(progress.isInProgress) // => false

progress.start()

console.log(progress.isInProgress) // => true

Activate the progress bar.

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

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

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

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.

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

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

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

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

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

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

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

await progress.promise(fetch('/data.json'), { waitAnimation: true })

alert('Complete!')

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

MIT License ❤️📝 skt-t1-byungi