纯js和CSS3谷歌Material Design样式进度条插件

这是一款使用纯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类型可以工作在所有浏览器上。