zprogress

虚拟进度条.

💊 兼容性

单元测试保证支持如下环境：

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中的例子

📂 Example

打开 Example/demo-global.html

🚀 使用者指南

通过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,
}