MProgress.js
Google Material Design Progress Linear bar.
It uses CSS3 and vanilla JavaScript which doesn't depend on any other libraries.
Types and preview
Type 1. Determinate
![](https://raw.githubusercontent.com/lightningtgc/MProgress.js/gh-pages/styles/images/determinate.gif)
Type 2. Buffer
![](https://raw.githubusercontent.com/lightningtgc/MProgress.js/gh-pages/styles/images/buffer.gif)
Type 3. Indeterminate
![](https://raw.githubusercontent.com/lightningtgc/MProgress.js/gh-pages/styles/images/indeterminate.gif)
Type 4. Query Indeterminate and Determinate
![](https://raw.githubusercontent.com/lightningtgc/MProgress.js/gh-pages/styles/images/query.gif)
Or you can see all types together:
Vedio:Material Progress & activity
DEMO
How to start
Install it
Include mprogress.min.js
and mprogress.min.css
in your target html file.
You can also install it via Bower or npm:
bower install --save mprogress
npm install --save mprogress
Basic usage
Example for the Determinate
type
1.Instantiation:
var mprogress = ;
2.Show and start the bar by using:
mprogressstart;
Or you can just use the following code
to replace step 1 and 2:
var mprogress = 'start'; //start it immediately
3.Finish the loading and hide it :
mprogress;
Advanced usage
All types have start
and end
methods.
Type1: Determinate
Determinate
also has set
and inc
methods.
set(n)
Sets the progress bar status, where n
is a number from 0.0
to 1.0
.
eg:
mprogress;
inc()
Increases by a random amount.
eg:
mprogress; // Increase the bar with a random amount.mprogress; // This will get the current status value and adds 0.3 until status is 0.994
Type2: Buffer
Its always used for video loading, and you can use for other case.
Init Type Buffer :
var bufferIntObj = template: 2;var bufferProgress = bufferIntObj;
Start it:
bufferProgressstart;
If you want to start it immediately after instantiating it,you can use:
var bufferIntObj = template: 2 // type number start: true // start it now;var bufferProgress = bufferIntObj;
End it:
bufferProgress;
Buffer
also has set
, inc
and setBuffer
methods
Type Buffer
has two progress: main progress and buffer progress.
set(n)
Sets the main progress bar status (0,1)
setBuffer(num)
Sets the buffer progress bar status (0,1)
inc()
Increases by a random amount, including buffer bar.
Type3:Indeterminate
Init Type Indeterminate :
var intObj = template: 3 parent: '#customId' // this option will insert bar HTML into this parent Element ;var indeterminateProgress = intObj;
Type Indeterminate just has start
and end
methods.
indeterminateProgressstart; indeterminateProgress;
Type4:Query Indeterminate and Determinate
Init Type Query :
var intObj = template: 4 parent: '#anothercustomId' // to other position;var queryProgress = intObj;
Type Query just has start
and end
methods.
queryProgressstart; queryProgress;
Configuration
Passing an object(configuration) to instantiated Mprogress
var mp = configuration;
template
Set the progress bar type. (default: 1)
var mp = // vaule { // 1: Type Determinate, // 2: Buffer, // 3: Indeterminate, // 4: Query, // '<div>...</div>': 'yourcustomHTML' // } template: 2 ;
parent
Change the parent container where the bar is shown. (default: body)
var mp = parent: '#customContainer' ;
start
Start the bar immediately. (default: false)
var mp = template: 4 start: true;
For type1 Determinate, you can just use:
var mp = 'start';
Advanced Configuration
trickle
trickleRate
trickleSpeed
minimum
easing
positionUsing
speed
Browser Support
Mobile First.
All types work in Chrome and Firefox.
Type Determinate works in all browsers.