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