这是一款使用纯JS和CSS3制作的谷歌Material Design样式的进度条插件。该插件没有依赖任何外部库。该进度条插件有4种类型的动画方式，分别是：确定型、缓冲型、不确定型和查询确定型。

使用方法

首先要在页面中引入mprogress.js和mprogress.css文件。

<link rel='stylesheet' href='mprogress.css'/>

<script src='mprogress.js'></script>
基本使用方法

以Determinate类型为例子，首先创建进度条对象实例：

var mprogress = new Mprogress();

然后可以显示和开始执行进度条动画。

mprogress.start();

或者使用下面的代码也可以完成上面两步的工作：

var mprogress = new Mprogress('start');  //立刻开始动画

使用下面的代码结束和隐藏进度条。

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); // This will get the current status value and adds 0.3 until status is 0.994

类型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);

结束进度条动画：

bufferProgress.end();

Buffer同样有set和inc方法。

Buffer有两个增长动画：主progress和buffer progress。

set(n)

设置主progress的状态，数值在0-1之间。

setBuffer(num)

设置buffer progress的状态，数值在0-1之间。

inc

进度条随机增长一个数值，包括buffer Bar。

类型3：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

初始化类型为查询：

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

Query类型只有start和end方法。

queryProgress.start();

queryProgress.end();

配置参数

通过一个对象(configuration)来实例化Mprogress进度条。

var mp = new Mprogress(configuration);
  • template：设置进度条的类型，默认值为1。 
    var mp = new Mprogress({
  // vaule { 
  //    1: Type Determinate,
  //    2: Buffer,
  //    3: Indeterminate, 
  //    4: Query,
  //  '
    ...
    ': 'yourcustomHTML'
  // }
  template: 2 
});
  • parent：改变进度条的父容器。默认值为body： 
    var mp = new Mprogress({
  parent: '#customContainer' 
});
  • start：立刻开始时进度条动画。默认值：false。 
    var mp = new Mprogress({
  template: 4,
  start: true
});

    对于类型1：Determinate 你可以使用：

    var mp = new Mprogress('start');

高级配置参数

该进度条插件有以下可用的高级配置参数：

  • trickle
  • trickleRate
  • trickleSpeed
  • minimum
  • easing
  • positionUsing
  • speed

浏览器兼容

  • 移动设备优先
  • 所有类型的进度条都可以工作在Chrome 和 Firefox浏览器上。
  • Determinate类型可以工作在所有浏览器上。