Fork me on GitHub

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

More details

See more details on github!