• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# progress
2
3> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
5
6进度条，用于显示内容加载或操作处理进度。
7
8## 权限列表
9
10无
11
12
13## 子组件
14
15不支持。
16
17
18## 属性
19
20除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
21
22| 名称 | 类型 | 默认值 | 必填 | 描述 |
23| -------- | -------- | -------- | -------- | -------- |
24| type | string | horizontal | 否 | 设置进度条的类型，该属性不支持动态修改，可选值为：<br/>-&nbsp;horizontal：线性进度条；<br/>-&nbsp;circular：loading样式进度条；<br/>-&nbsp;ring：圆环形进度条；<br/>-&nbsp;scale-ring：带刻度圆环形进度条<br/>-&nbsp;arc：弧形进度条。<br/>-&nbsp;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除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
48
49type=horizontal
50
51| 名称 | 类型 | 默认值 | 必填 | 描述 |
52| -------- | -------- | -------- | -------- | -------- |
53| color | &lt;color&gt; | \#ff007dff | 否 | 设置进度条的颜色。 |
54| stroke-width | &lt;length&gt; | 4px | 否 | 设置进度条的宽度。 |
55| background-color | &lt;color&gt; | - | 否 | 设置进度条的背景色。 |
56| secondary-color | &lt;color&gt; | - | 否 | 设置次级进度条的颜色。 |
57
58type=circular
59
60| 名称 | 类型 | 默认值 | 必填 | 描述 |
61| -------- | -------- | -------- | -------- | -------- |
62| color | &lt;color&gt; | - | 否 | loading进度条上的圆点颜色。 |
63
64type=ring, scale-ring
65
66| 名称 | 类型 | 默认值 | 必填 | 描述 |
67| -------- | -------- | -------- | -------- | -------- |
68| color | &lt;color&gt;&nbsp;\|&nbsp;&lt;linear-gradient&gt; | - | 否 | 环形进度条的颜色，ring类型支持线性渐变色设置。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;线性渐变色仅支持两个颜色参数设置格式，如color&nbsp;=&nbsp;linear-gradient(\#ff0000,&nbsp;\#00ff00)。 |
69| background-color | &lt;color&gt; | - | 否 | 环形进度条的背景色。 |
70| secondary-color | &lt;color&gt; | - | 否 | 环形次级进度条的颜色。 |
71| stroke-width | &lt;length&gt; | 10px | 否 | 环形进度条的宽度。 |
72| scale-width | &lt;length&gt; | - | 否 | 带刻度的环形进度条的刻度粗细，类型为scale-ring生效。 |
73| scale-number | number | 120 | 否 | 带刻度的环形进度条的刻度数量，类型为scale-ring生效。 |
74
75type=arc
76
77| 名称 | 类型 | 默认值 | 必填 | 描述 |
78| -------- | -------- | -------- | -------- | -------- |
79| color | &lt;color&gt; | - | 否 | 弧形进度条的颜色。 |
80| background-color | &lt;color&gt; | - | 否 | 弧形进度条的背景色。 |
81| stroke-width | &lt;length&gt; | 4px | 否 | 弧形进度条的宽度。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;进度条宽度越大，进度条越靠近圆心，进度条始终在半径区域内。 |
82| start-angle | &lt;deg&gt; | 240 | 否 | 弧形进度条起始角度，以时钟0点为基线，取值范围为0到360（顺时针）。 |
83| total-angle | &lt;deg&gt; | 240 | 否 | 弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。 |
84| center-x | &lt;length&gt; | 弧形进度条宽度的一半 | 否 | 弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-y和radius一起使用。 |
85| center-y | &lt;length&gt; | 弧形进度条高度的一半 | 否 | 弧形进度条中心位置，（坐标原点为组件左上角顶点）。该样式需要和center-x和radius一起使用。 |
86| radius | &lt;length&gt; | 弧形进度条宽高最小值的一半 | 否 | 弧形进度条半径，该样式需要和center-x和center-y一起使用。 |
87
88type=eclipse<sup>5+</sup>
89
90| 名称 | 类型 | 默认值 | 必填 | 描述 |
91| -------- | -------- | -------- | -------- | -------- |
92| color | &lt;color&gt; | - | 否 | 圆形进度条的颜色。 |
93| background-color | &lt;color&gt; | - | 否 | 弧形进度条的背景色。 |
94
95
96## 事件
97
98支持[通用事件](../arkui-js/js-components-common-events.md)。
99
100## 方法
101
102支持[通用方法](../arkui-js/js-components-common-methods.md)。
103
104
105## 示例
106
107```
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```
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![zh-cn_image_0000001180339632](figures/zh-cn_image_0000001180339632.png)
132
133
134