纯js和CSS3谷歌Material Design样式进度条插件 Google Material Design Progress linear bar

Intro

Mprogress.js creates progress linear bar from Google Material Design.

By using CSS3 and pure js which don't depend on any other libraries.

You can use 4 types of linear bar.

Type1: Determinate

determinate

Source code:

var mprogress = new Mprogress();

↓ ↓ ↓ ↓ ↓ ↓ Click these buttons ↓ ↓ ↓ ↓ ↓ ↓
start end set inc

mprogress.start() — Start and show progress bar.

mprogress.end() — Finish and hide bar.

mprogress.set(0.4) — Set a percentage.

mprogress.inc() — Increase by a little.

Type2: Buffer

buffer

Source code:

var mprogress2 = new Mprogress({

template: 2,

parent: '#demoBuffer'

});
start end set inc setBuffer

Type3: Indeterminate

indeterminate

Source code:

var mprogress3 = new Mprogress({

template: 3,

parent: '#demoIn'

});
start end

Type4: Query Indeterminate and Determinate

query

Source code:

var mprogress4 = new Mprogress({

template: 4,

parent: '#demoQuery'

});
start end