# progress 进度条,用于显示内容加载或操作处理进度。 ## 权限列表 无 ## 子组件 不支持。 ## 属性 除支持[通用属性](js-components-common-attributes.md)外,还支持如下属性:
名称
类型
默认值
必填
描述
type
string
horizontal
否
设置进度条的类型,该属性不支持动态修改,可选值为:
percent
number
0
当前进度。取值范围为0-100。
secondarypercent
次级进度。取值范围为0-100。
clockwise
boolean
true
圆环形进度条是否采用顺时针。
color
<color>
#ff007dff
设置进度条的颜色。
stroke-width
<length>
4px
设置进度条的宽度。
background-color
-
设置进度条的背景色。
secondary-color
设置次级进度条的颜色。
loading进度条上的圆点颜色。
<color> | <linear-gradient>
环形进度条的颜色,ring类型支持线性渐变色设置。
线性渐变色仅支持两个颜色参数设置格式,如color = linear-gradient(#ff0000, #00ff00)。
环形进度条的背景色。
环形次级进度条的颜色。
10px
环形进度条的宽度。
scale-width
带刻度的环形进度条的刻度粗细,类型为scale-ring生效。
scale-number
120
带刻度的环形进度条的刻度数量,类型为scale-ring生效。
弧形进度条的颜色。
弧形进度条的背景色。
弧形进度条的宽度。
进度条宽度越大,进度条越靠近圆心,进度条始终在半径区域内。
start-angle
<deg>
240
弧形进度条起始角度,以时钟0点为基线,取值范围为0到360(顺时针)。
total-angle
弧形进度条总长度,范围为-360到360,负数标识起点到终点为逆时针。
center-x
弧形进度条宽度的一半
弧形进度条中心位置,(坐标原点为组件左上角顶点)。该样式需要和center-y和radius一起使用。
center-y
弧形进度条高度的一半
弧形进度条中心位置,(坐标原点为组件左上角顶点)。该样式需要和center-x和radius一起使用。
radius
弧形进度条宽高最小值的一半
弧形进度条半径,该样式需要和center-x和center-y一起使用。
圆形进度条的颜色。