Colorful Progress Bar Library For Vanilla JavaScript – Qier Progress

Category: Javascript , Loading , Recommended | December 17, 2020
Author: vortesnail
Views Total: 121 views
Official Page: Go to website
Last Update: December 17, 2020
License: MIT

Preview:

Colorful Progress Bar Library For Vanilla JavaScript – Qier Progress

Description:

Qier Progress is an easy, dependency-free JavaScript library that helps create slim, beautiful, and colorful progress bars to visualize loading status.

How to use 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/[email protected]/dist/QProgress.umd.min.js"></script>

2. Create a new instance of 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 end.

qprogress.finish()

5. Set the progress percentage.

// 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 following 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 current progress value.

qprogress.status

You Might Be Interested In:


Leave a Reply