Easy Progress Bar Engine With Promise Support – Rsup Progress

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

Preview:

Easy Progress Bar Engine With Promise Support – Rsup Progress

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

You Might Be Interested In:


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

Leave a Reply