• Progress 进度条

    展示操作的当前进度。

    何时使用

    在操作需要较长时间才能完成时,为用户显示该操作的当前进度和状态。

    代码演示

    标准的进度条。

    适合放在较狭窄的区域内。

    会动的进度条才是好进度条。

    format 属性指定格式。

    标准的进度条。

    圈形的进度。

    小一号的圈形进度。

    会动的进度条才是好进度条。

    通过设置 type=dashboard,可以很方便地实现仪表盘样式的进度条。

    API

    属性 说明 类型 默认值
    format 内容的模板函数 function(percent) percent => percent + '%'
    gapDegree (type=circle) 圆形进度条缺口角度,可取值 0 ~ 360 number 0
    gapPosition (type=circle) 圆形进度条缺口位置 Enum{ ‘top’, ‘bottom’, ‘left’, ‘right’ } top
    percent 百分比 number 0
    showInfo 是否显示进度数值或状态图标 boolean true
    status 状态,可选:success exception active string -
    strokeWidth (type=line) 进度条线的宽度,单位 px number 10
    strokeWidth (type=circle) 圆形进度条线的宽度,单位是进度条画布宽度的百分比 number 6
    type 类型,可选 line circle dashboard loading string line
    width (type=circle) 圆形进度条画布宽度,单位 px number 132
    successPercent 已完成的分段百分比,type="line" 时有效 number 0