Easy Progress Bar Engine With Promise Support – Rsup Progress

Category: Javascript , Loading , Recommended | August 30, 2022
Views Total:312 views
Official Page:Go to website
Last Update:August 30, 2022


Easy Progress Bar Engine With Promise Support – Rsup Progress


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


5. End the progress bar.

fetch('data.json').then(response => {

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.

  // options here

9. Check if the progress bar is running. Returns true or false.



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

You Might Be Interested In:

One thought on “Easy Progress Bar Engine With Promise Support – Rsup Progress

Leave a Reply