# 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,负数标识起点到终点为逆时针。 |
# 示例代码
← image-animator text →