1.0.5 • Published 4 years ago
zprogress v1.0.5
zprogress
虚拟进度条.
:pill: 兼容性
单元测试保证支持如下环境:
| IE | CH | FF | SF | OP | IOS | Android | Node |
|---|---|---|---|---|---|---|---|
| 6+ | 29+ | 55+ | 9+ | 50+ | 9+ | 4+ | 4+ |
注意:编译代码依赖ES5环境,对于ie6-8需要引入es5-shim才可以兼容,可以查看example/demo-global.html中的例子
:open_file_folder: Example
打开 Example/demo-global.html

:rocket: 使用者指南
通过npm下载安装代码
$ npm install --save zprogress如果你是node环境
var ZProgress = require('zprogress');
var progress = new ZProgress({
/* Settings */
onChange(step) {
console.log('step:', step)
},
})
progress.start()如果你是webpack等环境
import ZProgress from 'zprogress';
const progress = new ZProgress({
/* Settings */
onChange(step) {
console.log('step:', step)
},
})
progress.start()如果你是requirejs环境
requirejs(['node_modules/zprogress/dist/index.aio.js'], function (ZProgress) {
var progress = new ZProgress({
/* Settings */
onChange(step) {
console.log('step:', step)
},
})
progress.start()
})如果你是浏览器环境
<script src="node_modules/zprogress/dist/index.aio.js"></script>Mehods
| 描述 | 参数 | |
|---|---|---|
| set | 设置值 | |
| start | 开始 | |
| done | 结束 | |
| pause | 暂停 | |
| stop | 暂停并重置 | |
| reset | 重置 | |
| inc/trickle | 步进 | (val?: number) |
| isStarted | 是否开始 | |
| isPause | 是否暂停 | |
| isDone | 是否结束了 | |
| ZProgress.clamp | 返回在区间的值 | (val?: number) |
Settings
const settings = {
/**
* 开始后是否步进
* @type { Boolean }
*/
trickle: true,
/**
* 步进频率, 定时器延迟值
* @type { Number }
*/
trickleSpeed: 200,
/**
* 最小值
* @type { Number }
*/
min: 0,
/**
* 最大值
* @type { Number }
*/
max: 100,
/**
* 即将完成的最大值
* @type { Number }
*/
// waitMax: .994,
waitMax: 98,
/**
* change事件
* @type { Function<number> }
*/
onChage: undefined,
}