How to make use of it:

1. Install and import the Qier Progress.

# NPM
$ npm i qier-progress --save

// ES module
import QProgress from 'qier-progress'

// UMD
<script src="https://cdn.jsdelivr.net/npm/q[email protected]/dist/QProgress.umd.min.js"></script>

2. Create a brand new instance for the Qier Progress.

// ES 
const qprogress = new QProgress()

// UMD
window.qprogress = new qProgress();

3. Start the progress bar.

qprogress.start();

4. Force the progress bar to the tip.

qprogress.finish()

5. Set the progress proportion.

// 50%
qprogress.set(0.5)

// 100%
qprogress.set(1.0)

6. Increment the progress bar.

// +20%
qprogress.inc(0.2)

7. Customize the progress bar with the next parameters.

const qprogress = new QProgress({

      // minimum percentage
      minimum: 0.12,

      // height in px
      height: 2,

      // background color
      color: '#1890ff',

      // is colorful?
      colorful: true,

      // easing function
      easing: 'ease',

      // animation speed
      speed: 400,

      // automatic increment
      trickle: true,
      trickleSpeed: 400,

      // parent container
      parentNode: 'body',

      // default selectors
      barSelector: '[role="bar"]',
      pegSelector: '[role="peg"]',

      // custom template
      template: '
 })

8. Get the present progress value.

qprogress.status

Colorful Progress Bar Library, qier progress Plugin/Github

See Demo And Download