Rsup Progress

A lightweight (1KB) progress bar with promise support
GitHub
308
Created 6 years ago, last commit 8 months ago
2 contributors
120 commits
Stars added on GitHub, month by month
0
0
0
0
0
0
0
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
Stars added on GitHub, per day, on average
Yesterday
=
Last week
0.0
/day
Last month
0.0
/day
Last 12 months
0.0
/day
npmPackage on NPM
Monthly downloads on NPM
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
No dependencies
README


A lightweight (1KB) progress bar with promise support

npm npm npm

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.

progress.start()

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

Using promise method.

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

Install

npm install rsup-progress
import { Progress } from 'rsup-progress'

Browser ESM

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

API

new Progress(options?)

Create an instance.

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

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.

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

progress.isInProgress

Check whether the progress bar is active.

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

progress.start()

console.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.

const 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.

progress.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.

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.

options.waitAnimation

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.

License

MIT License ❤️📝 skt-t1-byungi