1# progress 2 3 4进度条，用于显示内容加载或操作的处理进度。 5 6> **说明：** 7> 8> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10 11## 子组件 12 13不支持。 14 15 16## 属性 17 18除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性： 19 20| 名称 | 类型 | 默认值 | 必填 | 描述 | 21| -------- | -------- | -------- | -------- | -------- | 22| type | string | horizontal | 否 | 设置进度条的类型，该属性不支持动态修改，可选值为：<br/>- horizontal：线性进度条。<br/>- circular：loading样式进度条。<br/>- ring：圆环形进度条。<br/>- scale-ring：带刻度圆环形进度条。<br/>- arc：弧形进度条。<br/>- eclipse：圆形进度条，展现类似月圆月缺的进度展示效果。 | 23 24不同类型的进度条还支持不同的属性： 25 26- 类型为horizontal、ring、scale-ring时，支持如下属性： 27 | 名称 | 类型 | 默认值 | 必填 | 描述 | 28 | -------- | -------- | -------- | -------- | -------- | 29 | percent | number | 0 | 否 | 当前进度。取值范围为0-100。 | 30 | secondarypercent(Rich) | number | 0 | 否 | 次级进度。取值范围为0-100。 | 31 32- 类型为ring、scale-ring时，支持如下属性： 33 | 名称 | 类型 | 默认值 | 必填 | 描述 | 34 | -------- | -------- | -------- | -------- | -------- | 35 | clockwise | boolean | true | 否 | 圆环形进度条是否采用顺时针。 | 36 37- 类型为arc、eclipse时，支持如下属性： 38 | 名称 | 类型 | 默认值 | 必填 | 描述 | 39 | -------- | -------- | -------- | -------- | -------- | 40 | percent | number | 0 | 否 | 当前进度。取值范围为0-100。 | 41 42 43## 样式 44 45除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式： 46 47type=horizontal 48 49| 名称 | 类型 | 默认值 | 必填 | 描述 | 50| -------- | -------- | -------- | -------- | -------- | 51| color | <color> | \#ff007dff | 否 | 设置进度条的颜色。 | 52| stroke-width | <length> | 4px | 否 | 设置进度条的宽度。 | 53| background-color | <color> | - | 否 | 设置进度条的背景色。 | 54| secondary-color | <color> | - | 否 | 设置次级进度条的颜色。 | 55 56type=circular 57 58| 名称 | 类型 | 默认值 | 必填 | 描述 | 59| -------- | -------- | -------- | -------- | -------- | 60| color | <color> | - | 否 | loading进度条上的圆点颜色。 | 61 62type=ring, scale-ring 63 64| 名称 | 类型 | 默认值 | 必填 | 描述 | 65| -------- | -------- | -------- | -------- | -------- | 66| color | <color> \| <linear-gradient> | - | 否 | 环形进度条的颜色，ring类型支持线性渐变色设置。<br/>线性渐变色仅支持两个颜色参数设置格式，如color = linear-gradient(\#ff0000, \#00ff00)。 | 67| background-color | <color> | - | 否 | 环形进度条的背景色。 | 68| secondary-color | <color> | - | 否 | 环形次级进度条的颜色。 | 69| stroke-width | <length> | 10px | 否 | 环形进度条的宽度。 | 70| scale-width | <length> | - | 否 | 带刻度的环形进度条的刻度粗细，类型为scale-ring生效。 | 71| scale-number | number | 120 | 否 | 带刻度的环形进度条的刻度数量，类型为scale-ring生效。 | 72 73type=arc 74 75| 名称 | 类型 | 默认值 | 必填 | 描述 | 76| -------- | -------- | -------- | -------- | -------- | 77| color | <color> | - | 否 | 弧形进度条的颜色。 | 78| background-color | <color> | - | 否 | 弧形进度条的背景色。 | 79| stroke-width | <length> | - | 否 | 弧形进度条的宽度。<br/>进度条宽度越大，进度条越靠近圆心。即进度条始终在半径区域内。 | 80| start-angle | <deg> | 240 | 否 | 弧形进度条起始角度，以时钟0点为基线。范围为0到360（顺时针）。 | 81| total-angle | <deg> | 240 | 否 | 弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 | 82| center-x | <length> | - | 否 | 弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-y和radius一起。 | 83| center-y | <length> | - | 否 | 弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-x和radius一起。 | 84| radius | <length> | - | 否 | 弧形进度条半径，该样式需要和center-x和center-y一起。 | 85 86 87## 事件 88 89支持[通用事件](js-service-widget-common-events.md)。 90 91 92## 示例 93 94 95```html 96<!--xxx.hml --> 97<div class="container"> 98 <progress class="min-progress" type="scale-ring" percent= "10" secondarypercent="50"></progress> 99 <progress class="min-progress" type="horizontal" percent= "10" secondarypercent="50"></progress> 100 <progress class="min-progress" type="arc" percent= "10"></progress> 101 <progress class="min-progress" type="ring" percent= "10" secondarypercent="50"></progress> 102</div> 103``` 104 105 106```css 107/* xxx.css */ 108.container { 109 flex-direction: column; 110 height: 100%; 111 width: 100%; 112 align-items: center; 113} 114.min-progress { 115 width: 300px; 116 height: 300px; 117} 118``` 119**4*4卡片** 120 121 122 123
