Slim progress bars for anywhere you want to use
简体中文 | English
Introduction
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 ~
Quick Start
🛠
Install
npm install --save qier-progress
📦
Use
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()
Advanced usage
📌
Set progress value:
Use .set(n) to set a progress percentage, where 
0..1 .
qprogress.set(0.0) // same as .start()
qprogress.set(0.6)
qprogress.set(1.0) // same as .finish()
🎢
Increase manually:
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
🥣
Forced finished:
Use .finish() to unmount the progress var, of course, there will also have an end process animation.
qprogress.finish()
🧮
Get current progress value:
Use .status to get current value 0..1 .
qprogress.status
Configuration
🤔
How to customize
When creating an instance, you can customize some parameters like this：
const qprogress = new QProgress({
minimum: 0.08,
height: 3,
color: '#17829f'
})
📕
Configuration list
| Parameter | Description | Type | Default |
|---|---|---|---|
minimum |
Minimum percentage used upon starting. | number(0..1) | 0.12 |
height |
Progress bar's height, unit is px . |
number | 2 |
color |
Progress bar's color, support RGB. | string | '#1890ff' |
colorful |
Colorful mode switch. | boolean | true |
easing |
Css transition property time-function . |
string | 'ease' |
speed |
Css transition property duration , unit is ms . |
number | 400 |
trickle |
Automatic incrementing behavior switch. | boolean | true |
trickleSpeed |
Automatic incrementing speed, means increment interval, unit is ms . |
number | 400 |
parentNode |
Specify this to change the parent container. | Element | string | 'body' |
Contribution
Welcome to participate in this project, please read CONTRIBUTING carefully.
Inspiration and purpose
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!
About me
2 Jan 18, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
6 Aug 3, 2022
8 Jun 16, 2022
6 Jun 23, 2022
2 May 2, 2022
1 Apr 16, 2022
45 Jan 4, 2023
27 Dec 27, 2022
6 Dec 21, 2022
4 Jul 16, 2022
8 Nov 11, 2022
10 Dec 6, 2022
5 May 13, 2021
4 Nov 16, 2022
29 Dec 31, 2022
26 Dec 25, 2022