Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Slim progress bars for anywhere you want to use

npm version package size download Build Status Coverage Status

简体中文 | 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 ~

💃check demo

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 is a number between 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  where is a number between 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

Github.svg juejin-02.svg 哔哩哔哩.svg 知乎.svg

License

MIT

About

💃 Look at me, I am a slim progress bar and very colorful / 支持彩色或单色的顶部进度条

Topics

Resources

License

Releases

No releases published

Packages

No packages published