Easy Progress Bar Engine With Promise Support – Rsup Progress

Category: Javascript , Loading , Recommended | December 16, 2020
Author: skt-t1-byungi
Views Total: 184 views
Official Page: Go to website
Last Update: December 16, 2020
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

You Might Be Interested In:


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

Leave a Reply