dimied / rsup-progress Goto Github PK

A simple(1KB) 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 using start, end method.

progress.start()

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

Using promise method.

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

npm i rsup-progress

import Progress from 'rsup-progress'

<script src="https://unpkg.com/rsup-progress"></script>
<script>
    const progress = new RsupProgress();
</script>

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

Create instance.

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

• height - Progress bar height. Default is 4px.
• className - Progress bar class attribute.
• 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 options.

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

Returns whether it is in progress or not.

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

progress.start()

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

Start the progress bar.

Complete the progress bar. If immediately is true, remove the element immediately.

Call the start and end functions automatically by promise.

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

Minimum time to show and maintain the progressbar. Default is 100ms. If 0 is given and promise is already resolved, the progressbar does not appear.

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

If options.delay is given, it starts after a delay.

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

If the promise ends before the delay, the progress bar will not start.

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

It is useful when avoiding the progressbar flash that occurs when the promise is short.

MIT License ❤️📝 skt-t1-byungi