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

当前位置:主页 > jQuery库 > 布局和界面 > 纯js和CSS3谷歌Material Design样式进度条插件
纯js和CSS3谷歌Material Design样式进度条插件
分享:

    插件介绍

    这是一款使用纯JS和CSS3制作的谷歌Material Design样式的进度条插件。该插件没有依赖任何外部库。它可以制作4种类型的进度条动画,使用扁平化设计,非常时尚。

    浏览器兼容性

    浏览器兼容性
    时间:02-05
    阅读:
简要教程

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

使用方法

首先要在页面中引入mprogress.jsmprogress.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();
                
高级使用方法

所有的进度条类型都有startend方法。

类型1:Determinate

Determinate同样有setinc方法。

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同样有setinc方法。

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类型只有startend方法。

indeterminateProgress.start();

indeterminateProgress.end();
                

类型4:Query Indeterminate and Determinate

初始化类型为查询:

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

Query类型只有startend方法。

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类型可以工作在所有浏览器上。