Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
qier-progress
Advanced tools
Readme
简体中文 | English
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 ~
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 .done()
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'
})
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' |
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!
FAQs
Look at me, I am a slim progress bar and very colorful
The npm package qier-progress receives a total of 136 weekly downloads. As such, qier-progress popularity was classified as not popular.
We found that qier-progress demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.