谷歌Material Design风格纯JS进度条插件 Google Material Design Progress Linear bar

Mprogress.js 是一款Google Material Design风格的线性进度条插件。

它通过纯JS和CSS3来制作,没有任何外部依赖库。

你可以选择4种类型的进度条效果。

类型1: Determinate

Source code:

var mprogress = new Mprogress();

↓ ↓ ↓ ↓ ↓ ↓ 点击下面的按钮,进度条效果在页面顶部 ↓ ↓ ↓ ↓ ↓ ↓
start end set inc

mprogress.start() — 开始和显示进度条。

mprogress.end() — 结束和隐藏进度条。

mprogress.set(0.4) — 设置进度条的百分比。

mprogress.inc() — 增加一个刻度值。

类型2 : Buffer

Source code:

var mprogress2 = new Mprogress({

template: 2,

parent: '#demoBuffer'

});

点击下面的按钮查看效果,进度条效果在按钮下边。

start end set inc setBuffer

类型3: Indeterminate

Source code:

var mprogress3 = new Mprogress({

template: 3,

parent: '#demoIn'

});

点击下面的按钮查看效果,进度条效果在按钮下边。

start end

类型4: Query Indeterminate and Determinate

Source code:

var mprogress4 = new Mprogress({

template: 4,

parent: '#demoQuery'

});

点击下面的按钮查看效果,进度条效果在按钮下边。

start end