READM-zh-CN.md

一个优美且简洁进度条显示工具

English | 简体中文

介绍

qier-progress 用于缓解用户焦虑的进度条，它优美且简单，在你的网页发送请求或跳转网站的时候使用它吧！当然，还可以用于一些文件上传或加载场景。如果你知道 nprogress，那你对这个插件就更不会陌生了。

💃check demo

基本使用

🛠 安装

npm install --save qier-progress

📦 使用

首先, 从你的文件中引入插件。

import QProgress from 'qier-progress'

再者，创建一个实例对象（可传入一个对象用于自定义参数，下面讲到）。

const qprogress = new QProgress()

最后，在合适的位置启动它，再在你想的位置结束它吧～

qprogress.start()
qprogress.finish()

高级使用

📌 设定当前进度条位置：

使用.set(n) 进行设置 的值在 0..1 之间。

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

🎢 自定义快进：

使用 .inc(n) 增加进度, 但是它在 .finish() 执行之前永远不会达到 100% 。

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

🥣 强制结束：

使用 .finish() 强制结束，很好理解，就是在你想结束的位置执行它，不然永远存在进度条。

qprogress.finish()

🧮 获取当前进度位置

使用 .status 获取当前进度位置，可用于一些你喜欢的判断，  的范围在 0..1 之间.

qprogress.status

传入参数定义

🤔 我们如何自定义进度条？

在创建实例的时候，我们可以传入一个对象自定义实例对象的一些属性，比如开始最小值、进度条高度、颜色等：

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

📕 参数说明

参数	描述	类型	默认值
minimum	启动时使用的最小百分比。	number(0..1)	0.12
height	进度条的高度，单位为 px 。	number	2
color	进度条的颜色，支持RGB。	string	'#1890ff'
colorful	是否彩色模式的开关。	boolean	true
easing	Css transition 属性的 time-function 。	string	'ease'
speed	Css transition 属性的 duration , 单位为 ms 。	number	400
trickle	是否自动递增行为的开关。	boolean	true
trickleSpeed	自动递增的速度，表示递增间隔，单位为 ms 。	number	400
parentNode	指定此项可更改父容器。	Element | string	'body'

参与贡献

非常欢迎各位参与此项目，你可以对代码进行改进，功能的增加或者最主要的，添加测试！在此之前请仔细阅读 CONTRIBUTING 。

灵感

这个项目最直接的灵感就是 nprogress, 参照了大量其源码，并决定用 typescript 进行重构，并增加了一些其他的特性。非常感谢 nprogress 的贡献者们 给予我一个学习的机会～

关于我

   

License

MIT