谷歌Material Design风格纯JS进度条插件-灵象搜搜资源网

谷歌Material Design风格纯JS进度条插件

发布2020-11-08 浏览1081次下载20次

特别声明：本站所有资源均来源于互联网，如有侵权请联系站长（171373236#qq.com）！将第一时间删除，源码仅供参考学习，请勿商用或其它非法用途，否则一切后果用户自负！

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');来立刻执行进度条动画。