Progress 进度条
简介
进度条在下载、提交或者页面切换的时候经常用到，是管理系统的必备组件。本框架的进度条基于v1.0的版本改造成了js插件。
特点
本进度条插件功能齐全，能满足常见场景需求，其特点如下：
- 1、支持三种外观形式，分别是line条状、circle圆环、semicircle半圆环和gapcircle缺角圆环
- 2、两种HTML结构，line条状使用div结构，而circle、semicircle和gapcircle使用svg结构，都能做到无限放大而不失真
- 3、支持六种颜色主题，分别是primary、error、success、warning、info和question
- 4、在六种颜色主题基础上，支持六种渐变色
- 5、支持三种尺寸，分别是sm、md和lg
- 6、支持显示和隐藏结果文字，也可以将结果文字放到页面的任意地方
- 7、支持圆角和方角的边框
- 8、支持显示和隐藏轨道
- 9、支持自定义结果文字格式
- 10、支持set、get、done、reset等方法，便于与其他组件配合工作
- 10、支持set、completed、pause等监听
- 11、可自定义进度值范围，不限于0~100
- 12、支持制作倒计时进度条
- 13、可手动暂停和重启进度
使用方法
插件运行方式有两种：
- ax*属性：对ax-progress标签使用
axProgress属性，为了初始化看到效果可以使用value属性，即可按默认参数运行插件。 - js实例：通过
new axProgress('#ID')方式创建实例运行。
-
<div class="ax-row ax-split"> <div class="ax-col ax-col-11"> <div class="ax-progress" axProgress='value:45'></div> </div> <div class="ax-col ax-col-2"></div> <div class="ax-col ax-col-11"> <div class="ax-progress" id="jsIns"></div> </div> </div> -
let jsIns = new axProgress('#jsIns',{ value:25, });
圆环进度条
进度条默认为条状的，可通过type参数更换进度条外观。
type:line：条状进度条。type:circle：全圆进度条。type:semicircle：半圆进度条。type:gapcircle：仪表圆进度条。
<div class="ax-row ax-split">
<div class="ax-col ax-col-8">
<div class="ax-progress" axProgress='value:45,type:"circle"'></div>
</div>
<div class="ax-col ax-col-8">
<div class="ax-progress" axProgress='value:25,type:"semicircle"'></div>
</div>
<div class="ax-col ax-col-8">
<div class="ax-progress" axProgress='value:75,type:"gapcircle"'></div>
</div>
</div>
尺寸
三种类型都支持三种尺寸，通过size参数进行设定。
size:sm：纤细风格进度条，线宽为2px的进度条。size:md：常规风格进度条，线宽为6px的进度条，插件默认尺寸。size:lg：粗壮风格进度条，线宽为12px的进度条。
<div class="ax-row ax-split">
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:15,size:"sm"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:45,size:"sm",type:"circle"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:25,size:"sm",type:"semicircle"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:75,size:"sm",type:"gapcircle"'></div>
</div>
</div>
<div class="ax-row ax-split">
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:15,size:"md"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:45,size:"md",type:"circle"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:25,size:"md",type:"semicircle"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:75,size:"md",type:"gapcircle"'></div>
</div>
</div>
<div class="ax-row ax-split">
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:15,size:"lg"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:45,size:"lg",type:"circle"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:25,size:"lg",type:"semicircle"'></div>
</div>
<div class="ax-col ax-col-6">
<div class="ax-progress" axProgress='value:75,size:"lg",type:"gapcircle"'></div>
</div>
</div>
颜色
三种类型都支持多种颜色和渐变。通过theme设定颜色风格，可使用primary、success、error、warning、info和question；通过gradient:true使用渐变。
<div class="ax-row ax-split">
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:25,type:"semicircle",theme:"primary"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:25,type:"semicircle",theme:"success"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:25,type:"semicircle",theme:"error"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:25,type:"semicircle",theme:"warning"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:25,type:"semicircle",theme:"info"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:25,type:"semicircle",theme:"question"'></div>
</div>
</div>
<div class="ax-row ax-split">
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,theme:"primary"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,theme:"success"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,theme:"error"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,theme:"warning"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,theme:"info"'></div>
</div>
<div class="ax-col ax-col-4">
<div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,theme:"question"'></div>
</div>
</div>
自定义文本格式
通过labelFormat参数设置结果文本的HTML格式，默认是按插件内置的格式生成，用户可通过以下方法自定义格式：
- label属性标签：存放进度文本的大容器
- result属性标签：包裹progress和unit
- progress属性标签：存放当前进度值
- unit属性标签：存放进度值单位
- tips属性标签：存放进度提示文本
举例：<div label><div tips></div><div result><i progress></i><i unit></i></div></div>
通过labelText参数设置结果文本的的内容：
- complete：加载完成时的文字，默认“完成!”，可以填标签代码，比如:
<i class="ax-iconfont ax-icon-check-o-f"></i> - unit：默认%，可以填“人”、“日”、“件”等
- tips：进度提示文本，默认“当前进度”
-
<div class="ax-progress" id="textIns"></div> -
let textIns = new axProgress('#textIns',{ value:25, type:'circle', labelFormat:``, labelText:{ unit:'天', tips:'过去了', } });
自定义进度范围
通常用0~100表示进度范围，但是不排除有些场景会使用其他的进度范围，比如日期、步数、资金等；可通过range参数设定个性的进度值。range=[min,max]是一个数组。
因为进度值比较个性，所以通常需要配合labelText.unit参数定义单位。
<div class="ax-row ax-split">
<div class="ax-col ax-col-12">
<div class="ax-progress" axProgress='value:25,type:"circle",range:[0,31],labelText:{unit:"天"}'></div>
</div>
<div class="ax-col ax-col-12">
<div class="ax-progress" axProgress='value:15263,type:"circle",range:[0,20000],labelText:{unit:"步"}'></div>
</div>
</div>
自定义结果文本位置
通过labelPlace参数改变结果文本的存放位置，可以放在页面的任意节点；该参数可以是id、className或节点。
<div class="ax-row ax-split">
<div class="ax-col ax-col-12">
<div class="ax-progress" axProgress='value:25,type:"circle",labelPlace:"#place"'></div>
</div>
<div class="ax-col ax-col-12">
<div id="place"></div>
</div>
</div>
变量和操作方法
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.barSize：完整进度条尺寸（长度）真实值this.value：目标进度值this.barValue：目标真实进度值this.valueNow：当前值this.barValueNow：当前真实进度值this.completed：完成状态，false或truethis.timeRest：剩余时间，单位msthis.valueNowText：进度文本，从this.value取整this.targetDom：ax-progress节点this.wrapperDom：进度条父节点，非line类型this.wrapperDom===svgthis.trackDom：进度条的轨道节点，line类型this.wrapperDom===this.trackDomthis.barDom：进度条的进度节点this.labelDom：进度条的文本节点，存放着tips、progress、unit和complete等文本this.progressDom：label中的进度值节点this.unitDom：label中的单位节点this.tipsDom：label中的tips节点this.completeDom：显示“完成”的节点
内部操作方法如下：
this.set(value,duration, callback)：可改变进度条当前的进度，支持两个参数- value：进度值，应该在参数range范围内
- duration：自定义动画时间，单位ms
- callback：回调函数，支持两个参数：
- value：目标进度值
- barValue：目标真实进度值，一个半圆的总长是125.6px，如果value是50，那么barValue则为125.6*0.5px
this.reset(callback)：可让进度条归零（无动画），支持回调callback，回调无参数this.done(callback)：可让进度条跳至百分百（无动画），支持回调callback，回调无参数this.pause(callback)：停止进度动画，支持回调callback，回调支持两个参数- valueNow：当前进度值
- barValueNow：当前真实进度值
this.continue(duration)：停止进度动画之后继续进行动画，支持参数duration，如不填则为剩余时间this.get()：可获得实例当前和之前的数值，返回的是一个对象，对象属性如下：- value：目标进度值
- barValue：目标bar真实值
- valueNow：当前进度值
- barValueNow：当前bar真实值
- completed：是否加载完成，返回true或false
- timeRest：剩余时间，动画完成则为0，如果终止动画或者在动画进行中则不为0
- valueNowText：写在进度容器中的文本，正整数
按下f12打开控制台查看get方法获取的内容！
-
<div class="ax-progress" id="setIns"></div> <div align="center"> <a href="###" class="ax-btn" id="set0">进度为0</a> <a href="###" class="ax-btn" id="set60">进度为60</a> <a href="###" class="ax-btn" id="set100">进度为100</a> <a href="###" class="ax-btn" id="reset0">重置</a> <a href="###" class="ax-btn" id="done">跳转完成 </a> <a href="###" class="ax-btn" id="get">获取</a> </div> -
let setIns = new axProgress('#setIns', { value: 25, type: 'circle', }), set0 = document.querySelector('#set0'), set60 = document.querySelector('#set60'), set100 = document.querySelector('#set100'), reset0 = document.querySelector('#reset0'), done = document.querySelector('#done'), getBtn = document.querySelector('#get'); set0.onclick = function () { setIns.set(0); } set60.onclick = function () { setIns.set(60); } set100.onclick = function () { setIns.set(100); } reset0.onclick = function () { setIns.reset(); } done.onclick = function () { setIns.done(); } getBtn.onclick = function () { console.log(setIns.get()); }
暂停和继续
插件允许对进度条进行暂停和继续操作，this.pause方法会将进行中的进度条暂停；this.continue方法会将进度条按上次设定值继续运行下去，直至完成。
注意：只有使用了this.pause方法之后才可以使用this.continue方法。
另外，用了this.pause方法之后会让整个进度条处于停止状态，需要通过this.continue、this.reset或this.done方法解除停止状态才可使用this.set方法。
-
<div class="ax-progress" id="pauseIns"></div> <div align="center"> <a href="###" class="ax-btn" id="pause0">进度为0</a> <a href="###" class="ax-btn" id="pause60">进度为60</a> <a href="###" class="ax-btn" id="pause100">进度为100</a> <a href="###" class="ax-btn" id="pause">停止</a> <a href="###" class="ax-btn" id="continue">继续</a> </div> -
let pauseIns = new axProgress('#pauseIns', { value: 25, type: 'circle', }), pause0 = document.querySelector('#pause0'), pause60 = document.querySelector('#pause60'), pause100 = document.querySelector('#pause100'), pause = document.querySelector('#pause'), conti = document.querySelector('#continue'); pause0.onclick = function () { pauseIns.set(0,5000); } pause60.onclick = function () { pauseIns.set(60,5000); } pause100.onclick = function () { pauseIns.set(100,5000); } pause.onclick = function () { pauseIns.pause(); } conti.onclick = function () { pauseIns.continue(); }
旋转进度
对于type:circle的进度条可以使用rotate:true以旋转的方式完成进度。
-
<div class="ax-progress" id="rotateIns"></div> <div align="center"> <a href="###" class="ax-btn" id="begin">点我前进</a> <a href="###" class="ax-btn" id="reset">重置</a> </div> -
let rotateIns = new axProgress('#rotateIns',{ value:25, type:'circle', rotate:true, }), begin = document.querySelector('#begin'), reset = document.querySelector('#reset'); begin.onclick=function(){ rotateIns.set(60); setTimeout(function(){ rotateIns.set(80); },2000); setTimeout(function(){ rotateIns.set(100); },4000); } reset.onclick=function(){ rotateIns.set(25); }
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
set/onSet设置进度的时候执行，支持两个参数- value:当前进度值
- barValue:当前真实值
start/onStart进度为0后执行，无参数completed/onCompleted加载完成后执行，无参数doing/onDoing加载进行中执行，支持两个参数- value:进度值
- barValue:真实值
reset/onReset重置归零后执行，无参数done/onDone跳至百分百后执行，无参数pause/onPause暂停后执行，支持两个参数- valueNow:当前进度值
- barValueNow:当前真实值
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
<div class="ax-progress" id="onIns"></div> <div align="center"> <a href="###" class="ax-btn" id="ok">完成进度</a> <a href="###" class="ax-btn" id="back">重置</a> </div> -
let onIns = new axProgress('#onIns', { value: 25, type: 'circle', }), ok = document.querySelector('#ok'), back = document.querySelector('#back'); ok.onclick = function () { onIns.set(100); } back.onclick = function () { onIns.set(25); } onIns.on('seted', function (value, barValue) { console.log('设置成功，进度值：' + value + '，真实值：' + barValue) }).on('doing', function (value, barValue) { console.log('进行中！，当前值：' + value + '，真实值：' + barValue) }).on('started', function () { console.log('开始加载！') }).on('completed', function () { console.log('加载完成了！') });
销毁实例
通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。
-
<div class="ax-progress" id="onIns"></div> <div align="center"> <a href="###" class="ax-btn" id="ok">完成进度</a> <a href="###" class="ax-btn" id="back">重置</a> </div> -
let onIns = new axProgress('#onIns', { value: 25, type: 'circle', }), ok = document.querySelector('#ok'), back = document.querySelector('#back'); ok.onclick = function () { onIns.set(100); } back.onclick = function () { onIns.set(25); } onIns.on('seted', function (value, barValue) { console.log('设置成功，进度值：' + value + '，真实值：' + barValue) }).on('doing', function (value, barValue) { console.log('进行中！，当前值：' + value + '，真实值：' + barValue) }).on('started', function () { console.log('开始加载！') }).on('completed', function () { console.log('加载完成了！') });
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axProgress('#id',{
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
type: 'line', //进度条类型，可选线性line，大圆circle、半圆semicircle和仪表圆gapcircle
theme: '',//进度条颜色风格，默认蓝色+浅灰，可选择primary、success、error、info、question或warning
gradient: false,//是否使用渐变色，默认false不使用，可选择true使用渐变色
linecap: 'round',//线条头尾是否是圆角，默认round，可选square
size: '',//进度条的整体大小（宽高），默认sm，可选择md和lg
range: [0, 100],//取值范围，value不应超出该范围
value: 0,//初始化后进度值，值在range范围
curve:'easeOut',//动画曲线，默认easeOut即先快后慢，另外可选linear(线性平均)、easeIn(先慢后快)、easeInOut(先较为慢后较为快)、easeOutIn(先较为快后较为慢)
duration: 0,//动画执行时间，数值类型，默认为0即插件根据移动距离自动生成执行时间，单位毫秒
rotate: false,//是否旋转，建议只对type=circle使用，默认false不旋转，可使用true旋转
trackShow: true,//是否显示轨道，默认true显示，可选择false不显示
labelFormat: '',//定义进度结果文本HTML格式，默认``
labelShow: true,//是否显示结果文本，默认为true显示，可选择false不显示
lablePlace: '',//结果文本所在位置，默认为空表示按插件定义的位置存放，可填#id或className自定义位置
labelText: {
unit: '%',
tips: '当前进度',
complete: '完成!',
},//定义进度结果文本内容
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
onInit: '',//回调函数，初始化后执行，支持两个参数：value和barValue
onStart: '',//回调函数，归零后执行，无参数，
onCompleted: '',//回调函数，进度百分百后执行，无参数
onDoing: '',//回调函数，进行中执行，支持两个参数：value和barValue
onSet: '',//回调函数，设置值之后执行，支持两个参数，value和barValue
onPause: '',//回调函数，停止之后执行，支持两个参数，valueNow和barValueNow
onReset: '',//回调函数，直接重置归零后执行，无参数
onDone: '',//回调函数，直接跳转百分百后执行，无参数
onDestroy: '',//回调函数，销毁后执行，无参数
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"