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