Progress 进度条
简介
进度条在下载、提交或者页面切换的时候经常用到,是管理系统的必备组件。本框架的进度条基于v1.0的版本改造成了js插件。
特点
本进度条插件功能齐全,能满足常见场景需求,其特点如下:
- 1、支持三种外观形式,分别是line条状、circle圆环、semicircle半圆环和gapcircle仪表圆环
- 2、两种HTML结构,line条状使用div结构,而circle、semicircle和gapcircle使用svg结构,都能做到无限放大而不失真
- 3、支持七种颜色主题,分别是primary、secondary、danger、success、warning、info和ad
- 4、在七种颜色主题基础上,支持七种渐变色
- 5、支持三种尺寸,分别是sm、md和lg
- 6、支持显示和隐藏结果文字,也可以将结果文字放到页面的任意地方
- 7、支持圆角和方角的边框
- 8、支持显示和隐藏轨道
- 9、支持自定义结果文字格式
- 10、支持set和get方法,便于与其他组件配合工作
- 10、支持seted和completed监听
- 11、可自定义进度值范围,不限于0~100
使用方法
插件运行方式有两种:
- 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>
颜色
三种类型都支持多种颜色和渐变。通过color
设定颜色风格,可使用primary、secondary、success、danger、warning、info和ad;通过gradient=true
使用渐变。
<div class="ax-row ax-split"> <div class="ax-col ax-col-4"> <div class="ax-progress" axProgress='value:25,type:"semicircle",color:"primary"'></div> </div> <div class="ax-col ax-col-4"> <div class="ax-progress" axProgress='value:25,type:"semicircle",color:"success"'></div> </div> <div class="ax-col ax-col-4"> <div class="ax-progress" axProgress='value:25,type:"semicircle",color:"danger"'></div> </div> <div class="ax-col ax-col-4"> <div class="ax-progress" axProgress='value:25,type:"semicircle",color:"warning"'></div> </div> <div class="ax-col ax-col-4"> <div class="ax-progress" axProgress='value:25,type:"semicircle",color:"info"'></div> </div> <div class="ax-col ax-col-4"> <div class="ax-progress" axProgress='value:25,type:"semicircle",color:"ad"'></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,color:"primary"'></div> </div> <div class="ax-col ax-col-4"> <div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,color:"success"'></div> </div> <div class="ax-col ax-col-4"> <div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,color:"danger"'></div> </div> <div class="ax-col ax-col-4"> <div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,color:"warning"'></div> </div> <div class="ax-col ax-col-4"> <div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,color:"info"'></div> </div> <div class="ax-col ax-col-4"> <div class="ax-progress" axProgress='value:90,type:"semicircle",gradient:true,color:"ad"'></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>
操作方法
通过set
方法可改变进度条当前的进度,支持两个参数
- value:进度值,应该在参数range范围内
- callback:回调函数,支持两个参数:
- value:修正后的当前进度值
- trueValue:改变实例状态的真实值,一个半圆的总长是125.6px,如果value是50,那么trueValue则为125.6*0.5px
通过get
方法可获得实例当前和之前的数值,返回的是一个对象,对象属性如下:
- value:修正后的当前进度值
- trueValue:改变实例状态的真实值
- lastValue:改变值之前的进度值
- lastTrueValue:改变值之前的真实值
- complete:是否加载完成,返回true或false
按下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="get">获取</a> </div>
-
let setIns = new axProgress('#setIns',{ value:25, type:'circle', }), set0 = document.querySelector('#set0'), set60 = document.querySelector('#set60'), set100 = document.querySelector('#set100'), getBtn = document.querySelector('#get'); set0.onclick=function(){ setIns.set(0); } set60.onclick=function(){ setIns.set(60); } set100.onclick=function(){ setIns.set(100); } getBtn.onclick=function(){ console.log(setIns.get()); }
旋转进度
对于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为关键字,实例后监听和在参数中监听效果相同。格式是:instance.on('event',function(){})
;具体事件说明如下:
seted
设置进度的时候执行,支持两个参数- value:当前进度值
- trueValue:当前真实值
started
进度为0后执行,无参数completed
加载完成后执行,无参数processing
加载进行中执行,支持两个参数- value:进度值
- trueValue:真实值
演示实例显示结果使用了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, trueValue) { console.log('设置成功,进度值:' + value + ',真实值:' + trueValue) }).on('processing', function (value, trueValue) { console.log('进行中!,当前值:' + value + ',真实值:' + trueValue) }).on('started', function () { console.log('开始加载!') }).on('completed', function () { console.log('加载完成了!') });
参数选项
document.addEventListener("DOMContentLoaded", function() { var demo1 = new axProgress('#id',{ type: 'line', //进度条类型,可选线性line,大圆circle半圆、semicircle和仪表圆gapcircle color: '',//进度条颜色风格,默认蓝色+浅灰,可选择primary、secondary、success、danger、info、ad或warning gradient: false,//是否使用渐变色,默认false不使用,可选择true使用渐变色 linecap: 'round',//线条头尾是否是圆角,默认round,可选square size: '',//进度条的整体大小(宽高),默认sm,可选择md和lg range: [0, 100],//取值范围,value不应超出该范围 value: 0,//初始化后进度值,值在range范围 duration: '',//动画执行时间,数值类型,单位毫秒 rotate: false,//是否旋转,建议只对type=circle使用,默认false不旋转,可使用true旋转 trackShow: true,//是否显示轨道,默认true显示,可选择false不显示 labelFormat: '',//定义进度结果文本HTML格式 labelShow: true,//是否显示结果文本,默认为true显示,可选择false不显示 lablePlace: '',//结果文本所在位置,默认为空表示按插件定义的位置存放,可填#id或className自定义位置 labelText: { unit: '%', tips: '当前进度', complete: '完成!', },//定义进度结果文本内容 started: '',//是一个函数,无参数,监听开始 completed: '',//是一个函数,无参数,监听完成 processing: '',//是一个函数,两个参数:value和trueValue,监听进行中 }); });