# progress

进度条,用于显示内容加载或操作处理进度。

# 子组件

不支持。

# 属性

支持 通用属性

名称 类型 默认值 必填 描述
type string horizontal 设置进度条的类型,该属性不支持动态修改,可选值为:
horizontal:进度条(弧形进度条通过设置样式radius实现);
circular:弧形加载动画。
percent number 0 当前进度。取值范围为0-100。type为circular时该属性无效。

# 事件

支持 通用事件

# 样式

支持 通用样式

名称 类型 默认值 必填 描述
color <color> - 进度条的颜色。
layer-color <color> - 进度条的背景色。
stroke-width <length> - 进度条的宽度。
radius <length> - 弧形进度条半径,该样式需要和center-x和center-y一起。
设置了该样式,则渲染出弧形进度条
center-x <length> - 弧形进度条中心位置,(坐标原点为组件左上角顶点)。该样式需要和center-y和radius一起。
center-y <length> - 弧形进度条中心位置,(坐标原点为组件左上角顶点)。该样式需要和center-x和radius一起。
start-angle <deg> 240 弧形进度条起始角度,以时钟0点为基线。范围为0到360(顺时针)。
total-angle <deg> 240 弧形进度条总长度,范围为-360到360,负数标识起点到终点为逆时针。

# 示例代码

查看 示例代码 (opens new window)