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);
                                                }
                                            

监听事件

借鉴jQuery的写法,本插件有若干监听方法,格式是:instance.on('event',function(){});具体事件说明如下:

  • seted 设置进度的时候执行,支持两个参数
    • value:当前进度值
    • trueValue:当前真实值
  • started 进度为0后执行,无参数
  • completed 加载完成后执行,无参数
  • processing 加载进行中执行,支持两个参数
    • value:进度值
    • trueValue:真实值

演示实例使用console方法,请用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,监听进行中
      });
});