Google Material Design Progress Linear bar.
It using CSS3 and pure js which don't depend on any other libraries.
Type 1. Determinate
Type 2. Buffer
Type 3. Indeterminate
Type 4. Query Indeterminate and Determinate
Or you can see all types together:
Vedio:Material Progress & activity
Including [mprogress.js] and [mprogress.css] into your target html file.
<link rel='stylesheet' href='mprogress.css'/>
<script src='mprogress.js'></script>
Example for the Determinate
type
1.Instantiation:
var mprogress = new Mprogress();
2.Show and start the bar by using:
mprogress.start();
Or you can just use the following code
to replace step 1 and 2:
var mprogress = new Mprogress('start');
3.Finish the loading and hide it :
mprogress.end();
All types have start
and end
methods.
Determinate
also have set
and inc
methods.
sets the progress bar status, where n
is a number from 0.0
to 1.0
.
eg:
mprogress.set(0.3);
increases by a random amount.
eg:
mprogress.inc(); // Increase the bar with a random amount.
mprogress.inc(0.3); // This will get the current status value and adds 0.3 until status is 0.994
It always used for vedio loading,and you can using for other case.
Init Type Buffer :
var bufferIntObj = {
template: 2
};
var bufferProgress = new Mprogress(bufferIntObj);
bufferProgress.start();
If you want to start it immediately when instantiate it,you can use:
var bufferIntObj = {
template: 2, // type number
start: true
};
var bufferProgress = new Mprogress(bufferIntObj);
bufferProgress.end();
Buffer
also have set
, inc
and setBuffer
methods
Type Buffer
has two progress: main progress and buffer progress.
sets the main progress bar status (0,1)
sets the buffer progress bar status (0,1)
Init Type Indeterminate :
var intObj = {
template: 3,
parent: '#customId' // this option will insert bar HTML into this parent Element
};
var indeterminateProgress = new Mprogress(intObj);
Type Indeterminate just has start
and end
methods.
indeterminateProgress.start();
indeterminateProgress.end();
Init Type Query :
var intObj = {
template: 4,
parent: '#anothercustomId' // in other position
};
var queryProgress = new Mprogress(intObj);
Type Query just has start
and end
methods.
queryProgress.start();
queryProgress.end();
Passing an object(configuration) to instantiated Mprogress