Author: | skt-t1-byungi |
---|---|
Views Total: | 323 views |
Official Page: | Go to website |
Last Update: | August 30, 2022 |
License: | MIT |
Preview:

Description:
Rsup Progress is a simple, fast, modern progress bar JavaScript library with promise support.
See Also:
How to use it:
1. Install and import the Rsup Progress as an ES module.
# NPM $ npm i rsup-progress --save
2. Or load the UMD version of the Rsup Progress library in the document.
<script src="https://unpkg.com/rsup-progress"></script> // or import Progress from './dist/index.js';
3. Initialize the library and we’re ready to go.
// ES Module const progress = new Progress(); // Browser const progress = new RsupProgress();
4. Start the progress bar.
progress.start()
5. End the progress bar.
fetch('data.json').then(response => { progress.end() })
6. Use with Promise.
const response = await progress.promise(fetch('data.json')) // add a delay progress.promise(delay(500), 200)
7. Default configurations.
const progress = new RsupProgress({ maxWidth: '99.8%', height: '4px', duration: 60000, hideDuration: 400, zIndex: '9999', color: '#ff1a59', className: '', timing: 'cubic-bezier(0,1,0,1)', position: 'top', // or 'bottom', 'none' container: document.body })
8. Update options.
progress.setOptions({ // options here })
9. Check if the progress bar is running. Returns true or false.
progress.isInProgress
Changelog:
v3.1.1 (08/30/2021)
- Removes the effect of padding or margins.
- Exports the option type.
v2.0.4 (07/27/2021)
- chore: add import field
v2.0.3 (07/04/2021)
- fix: remove space
- fix: cleanupTimer guard
- chore: add exports field in pkg
Hi There …How could I change the options to have a DIV as a container ? Thanks in advance