Progress进度条模块

Progress进度条是指数据加载状态、任务完成度,或事务进程;支持多种形态,包括条状、全圆、半圆和大半圆;支持多种主题颜色,包括渐变色;支持多种整体尺寸和轨道尺寸;支持任意数值的进度,不限于百分比。

简单使用

对文本容器使用ax-progress属性即可表示一个进度条,当然通常会使用value参数。

  • 输出
  • HTML
  •                 
                    
                

也可以通过id+new的方式创建实例。

  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    new ax.Progress('#demo01',{
                        value:21,
                    });
                    
                

不使用文字

参数label默认为true即显示进度结果文本,如果不需要可以设置label:falselabel.enable:false予以隐藏。

  • 输出
  • HTML
  •                 
                    
                

方角边缘

参数linecap设置轨道两头的轮廓形状,默认为round即圆角,可设为square方角。

  • 输出
  • HTML
  •                 
                    
                

基础外观配置

属性 类型 默认值 说明
type 'line'/'circle'/'semicircle'/'gapcircle' 'line' 进度条类型
theme 'prim'/'succ'/'error'/'info'/'issue'/'warn'/'' '' 颜色风格
gradient boolean false 是否使用渐变色
linecap 'round'/'square' 'round' 线条端点形状
size 'sm'/'md'/'lg'/'' '' 进度条宽度
thk 'sm'/'md'/'lg'/'' '' 进度条厚度
classes string '' 追加样式类

取值配置

属性 类型 默认值 说明
range array [0, 100] 取值范围
value number 0 初始进度值
steps array [] 进度阶段设置

动画配置

属性 类型 默认值 说明
curve 'easeOut'/'linear'/'easeIn'/'easeInOut'/'easeOutIn' 'easeOut' 动画曲线
duration number 0 动画时长(ms)
rotate boolean false 是否旋转

显示控制

属性 类型 默认值 说明
simple boolean false 是否隐藏轨道
control boolean false 是否显示控制按钮

标签配置

属性 类型 默认值 说明
label.enable boolean true 是否显示文本
label.template string '' 文本HTML模板
label.placement string '' 文本位置
label.unit string '%' 单位
label.tips boolean false 是否显示提示

数字显示配置

属性 类型 默认值 说明
number.type 'percent'/'value' 'percent' 显示类型
number.trunc boolean true 是否取整
number.emphatic boolean false 是否强调显示

等待函数

属性 类型 默认值 说明
b4Set function null 设置值前等待函数

回调函数

属性 类型 默认值 说明
onStart function null 进程开始回调
onMove function null 进程进行中回调
onEnd function null 进程结束回调
onZero function null 进度为0%回调
onCompleted function null 进度完成回调
onSet function null 设置值后回调
onPause function null 暂停后回调
onContinue function null 继续进行回调
onRestored function null 恢复初始值回调