Gathering detailed insights and metrics for rsup-progress
Gathering detailed insights and metrics for rsup-progress
Gathering detailed insights and metrics for rsup-progress
Gathering detailed insights and metrics for rsup-progress
❤️ A lightweight (1KB) progress bar with promise support
npm install rsup-progress
Typescript
Module System
Min. Node Version
Node Version
NPM Version
74.2
Supply Chain
98.9
Quality
75.9
Maintenance
100
Vulnerability
100
License
TypeScript (53.06%)
HTML (23.94%)
SCSS (23%)
Total Downloads
126,166
Last Day
92
Last Week
915
Last Month
2,975
Last Year
37,302
MIT License
306 Stars
120 Commits
10 Forks
4 Watchers
3 Branches
2 Contributors
Updated on Jun 19, 2025
Minified
Minified + Gzipped
Latest Version
3.2.0
Package Id
rsup-progress@3.2.0
Unpacked Size
21.85 kB
Size
4.82 kB
File Count
7
NPM Version
8.19.3
Node Version
18.13.0
Published on
Sep 27, 2023
Cumulative downloads
Total Downloads
Last Day
5.7%
92
Compared to previous day
Last Week
29.4%
915
Compared to previous week
Last Month
-4.6%
2,975
Compared to previous month
Last Year
11.9%
37,302
Compared to previous year
3
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.
1progress.start() 2 3fetch('/data.json').then(response => { 4 progress.end() 5})
Using promise
method.
1const response = await progress.promise(fetch('/data.json'))
1npm install rsup-progress
1import { Progress } from 'rsup-progress'
1<script type="module"> 2 import { Progress } from 'https://unpkg.com/rsup-progress/dist/esm/index.js' 3 const progress = new Progress() 4</script>
Create an instance.
1const progress = new Progress({ 2 height: 5, 3 color: '#33eafd', 4})
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.
1progress.setOptions({ 2 color: 'red', 3 className: 'class1 class2', 4})
Check whether the progress bar is active.
1console.log(progress.isInProgress) // => false 2 3progress.start() 4 5console.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.
1const 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.
1progress.promise(Promise.resolve(), { min: 0 }) // => Progress bar does not appear.
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.
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
.
MIT License ❤️📝 skt-t1-byungi
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Score
Last Scanned on 2025-06-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More