MProgress.js是一款谷歌Material Design风格纯JS进度条插件。该进度条通过纯JS和CSS3来制作，没有外部依赖库。你可以通过MProgress.js制作出4种不同类型的Material Design风格进度条效果。

安装

可以通过bower 或npm来安装MProgress.js进度条插件。

bower install --save mprogress
npm install --save mprogress                  
                

使用方法

使用该进度条插件需要在页面中引入mprogress.min.css和mprogress.min.js文件。

<link rel='stylesheet' href='mprogress.min.css'/>
<script src='mprogress.min.js'></script>                  
                

基本使用

以Determinate进度条类型为例，可以通过new Mprogress()方法来实例化一个进度条对象。

var mprogress = new Mprogress();          
                

然后可以通过对象的start()方法来开始显示进度条。

mprogress.start();        
                

你也可以使用下面的代码来完成以上两个步骤：

var mprogress = new Mprogress('start');  // 进度条实例化后立刻开始动画
                

最后你可以通过end()方法来结束和隐藏进度条。

mprogress.end();
                

高级使用方法

所有的类型都有start()和end()方法。

类型1：Determinate

Determinate类型的进度条有set()和inc()方法。

• set(n)：设置进度条的状态。当n为一个数值时，可以设置为0.0-1.0之间的任何数值。例如：

  mprogress.set(0.3);
  

• inc()：随机增加一个数值。例如：

  mprogress.inc(); // 随机之间进度条的数值
  mprogress.inc(0.3); // 获取当前的状态值，并加上0.3
  

类型2：Buffer

通常该类型进度条用于视频文件的加载。

初始化一个Buffer类型的进度条：

var bufferIntObj = {
  template: 2
};
var bufferProgress = new Mprogress(bufferIntObj);                  
                

进度条开始动画：

bufferProgress.start();                  
                

如果你项初始化后立刻开始进度条动画，代码可以如下：

var bufferIntObj = {
  template: 2, // type number
  start: true  // start it now
};
var bufferProgress = new Mprogress(bufferIntObj);                
                

结束进度条动画：

ufferProgress.end();                  
                

Buffer类型的进度条同样有set()和inc()方法，另外还有一个setBuffer()方法。

• set(n)：设置进度条的状态（0-1）。
• setBuffer(num)：设置buffer progress的状态（0-1）。
• inc()：进度条随机增加一个数值。

类型3：Indeterminate

初始化Indeterminate类型的进度条：

var intObj = {
  template: 3, 
  parent: '#customId' // this option will insert bar HTML into this parent Element 
};
var indeterminateProgress = new Mprogress(intObj);            
                

Indeterminate类型的进度条只有start()和end()方法。

indeterminateProgress.start();

indeterminateProgress.end();
                

类型4：Query Indeterminate and Determinate

初始化Query类型的进度条：

var intObj = {
  template: 4,
  parent: '#anothercustomId' // to other position
};
var queryProgress = new Mprogress(intObj);          
                

Query类型的进度条只有start()和end()方法。

queryProgress.start();

queryProgress.end();                  
                

配置参数

可以在初始化的时候以对象的方式为进度条传入配置参数：

var mp = new Mprogress({
  template: 2,
  parent: '#customContainer',
  start: true
});                  
                

• template：设置进度条的类型，默认为1。可选值有：1、Determinate，2、Buffer，3、Indeterminate，4、Query。
• parent：设置显示进度条的父容器。
• start：进度条是否立刻开始动画。对于类型1的Determinate类型，你只能使用var mp = new Mprogress('start');来立刻执行进度条动画。

浏览器兼容

MProgress.js是移动优先的进度条插件，适合在移动端使用。

所有类型的进度条都可以在Chrome和Firefox浏览器中支持工作。

MProgress.js进度条插件的github地址为：https://github.com/lightningtgc/MProgress.js

在线预览    源码下载