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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!