qier-progress is a progress bar. It can be used for some watting time like jump links, request data, and load or upload files and images to give us feedback and reduce our anxiety. Also if you have used nprogress, then you must know what I am talking about ~

💃check demo

npm install --save qier-progress

Firstly, import module in Vue, React, Angular wherever es6 module is supported .

import QProgress from 'qier-progress'

Secondly, create instance.

const qprogress = new QProgress()

Thirdly, simply call start() and finish() to control the progress bar.

qprogress.start()
qprogress.finish()

Use .set(n) to set a progress percentage, where is a number between 0..1 .

qprogress.set(0.0)     // same as .start()
qprogress.set(0.6)
qprogress.set(1.0)     // same as .finish()

Use .inc(n) to increment the progress bar, but it will stop increasing after reaching the threshold, means it will never reach 100% .

qprogress.inc()
qprogress.inc(0.2)	// specific value you want

Use .finish() to unmount the progress var, of course, there will also have an end process animation.

qprogress.finish()

Use .status to get current value  where is a number between 0..1 .

qprogress.status

When creating an instance, you can customize some parameters like this：

const qprogress = new QProgress({
  minimum: 0.08,
  height: 3,
  color: '#17829f'
})

Welcome to participate in this project, please read CONTRIBUTING carefully.

First of all, I am a beginner of typescript . When I enjoy the convenience brought by nprogress, I hope that I can learn a little bit from it, so I retyped this plugin using typescript  and added some other features. I learned a lot of coding knowledge in the process, and finally I sincerely thank the nprogress contributors very much, respect!

MIT