Skip to content

Progress 进度条

显示任务执行进度,支持线形与圆环两种形态、状态色与隐藏文字。

基础用法

基础用法

状态

状态

隐藏文字

隐藏文字

圆形进度

Circle 圆环

圆环默认直径 48、线宽 6,圆心显示百分比;type="circle" 切换形态。

圆形尺寸与线宽

尺寸 / 线宽

圆形状态

Circle 状态色

status="success|error" 整环变色(success 绿、error 红);show-text="false" 隐藏圆心百分比。

动态进度

动态进度

开始模拟任务

API

属性

属性说明类型默认值
no-text隐藏右侧/圆心百分比文本boolean
percent进度百分比(0–100,自动夹取)string0
show-text是否显示百分比文本stringtrue
sizecircle 直径(px)string48
status状态色;error 红色、success 绿色,未设置且进度满 100 时显示成功绿string
stroke-widthcircle 线宽(px)string6
type形态:line(线形)/ circle(圆环)stringline

role="progressbar" + aria-valuenow / aria-valuemin / aria-valuemax(line 与 circle 均同步)。