1# progress
2
3
4The **\<Progress>** component is used to provide a progress bar that displays the progress of content loading or an operation.
5
6> **NOTE**
7>
8> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
9
10
11## Child Components
12
13Not supported
14
15
16## Attributes
17
18In addition to the [universal attributes](js-service-widget-common-attributes.md), the following attributes are supported.
19
20| Name| Type| Default Value| Mandatory| Description|
21| -------- | -------- | -------- | -------- | -------- |
22| type | string | horizontal | No| Type of the progress bar, which cannot be changed dynamically. Available values are as follows:<br>- **horizontal**: linear progress bar.<br>- **circular**: loading progress bar.<br>- **ring**: ring progress bar.<br>- **scale-ring**: ring progress bar with a scale.<br>- **arc**: arc progress bar.<br>- **eclipse**: eclipse progress bar.|
23
24Different types of progress bars support different attributes.
25
26- When the type is **horizontal**, **ring**, or **scale-ring**, the following attributes are supported.
27    | Name| Type| Default Value| Mandatory| Description|
28  | -------- | -------- | -------- | -------- | -------- |
29  | percent | number | 0 | No| Current progress. The value ranges from 0 to 100.|
30  | secondarypercent(Rich) | number | 0 | No| Secondary progress. The value ranges from 0 to 100.|
31
32- When the type is **ring** or **scale-ring**, the following attributes are supported.
33    | Name| Type| Default Value| Mandatory| Description|
34  | -------- | -------- | -------- | -------- | -------- |
35  | clockwise | boolean | true | No| Whether the ring progress bar moves in a clockwise direction.|
36
37- When the type is **arc**, the following attributes are supported.
38    | Name| Type| Default Value| Mandatory| Description|
39  | -------- | -------- | -------- | -------- | -------- |
40  | percent | number | 0 | No| Current progress. The value ranges from 0 to 100.|
41
42
43## Styles
44
45In addition to the [universal styles](js-service-widget-common-styles.md), the following styles are supported.
46
47When the type is **horizontal**, the following styles are supported.
48
49| Name| Type| Default Value| Mandatory| Description|
50| -------- | -------- | -------- | -------- | -------- |
51| color | &lt;color&gt; | \#ff007dff | No| Color of the progress bar.|
52| stroke-width | &lt;length&gt; | 4px | No| Stroke width of the progress bar.|
53| background-color | &lt;color&gt; | - | No| Background color of the progress bar.|
54| secondary-color | &lt;color&gt; | - | No| Color of the secondary progress bar.|
55
56When the type is **circular**, the following styles are supported.
57
58| Name| Type| Default Value| Mandatory| Description|
59| -------- | -------- | -------- | -------- | -------- |
60| color | &lt;color&gt; | - | No| Color of the dot on the loading progress bar.|
61
62When the type is **ring** or **scale-ring**, the following styles are supported.
63
64| Name| Type| Default Value| Mandatory| Description|
65| -------- | -------- | -------- | -------- | -------- |
66| color | &lt;color&gt;&nbsp;\|&nbsp;&lt;linear-gradient&gt; | - | No| Color of the ring progress bar. The **ring** type supports the linear gradient<br>defined by two colors, for example, **color&nbsp;=&nbsp;linear-gradient(\#ff0000,&nbsp;\#00ff00)**.|
67| background-color | &lt;color&gt; | - | No| Background color of the ring progress bar.|
68| secondary-color | &lt;color&gt; | - | No| Color of the secondary ring progress bar.|
69| stroke-width | &lt;length&gt; | 10px | No| Width of the ring progress bar.|
70| scale-width | &lt;length&gt; | - | No| Scale thickness of the ring progress bar with a scale. This style takes effect only when the type is **scale-ring**.|
71| scale-number | number | 120 | No| Number of scales of the ring progress bar with a scale. This style takes effect only when the type is **scale-ring**.|
72
73When the type is **arc**, the following styles are supported.
74
75| Name| Type| Default Value| Mandatory| Description|
76| -------- | -------- | -------- | -------- | -------- |
77| color | &lt;color&gt; | - | No| Color of the arc progress bar.|
78| background-color | &lt;color&gt; | - | No| Background color of the arc progress bar.|
79| stroke-width | &lt;length&gt; | - | No| Stroke width of the arc progress bar.<br>A larger width value means that the progress bar is closer to the center of the circle. The width is always within the radius range.|
80| start-angle | &lt;deg&gt; | 240 | No| Start angle of the arc progress bar, which starts from the direction of zero o'clock. The value ranges from 0 to 360 degrees (clockwise).|
81| total-angle | &lt;deg&gt; | 240 | No| Total length of the arc progress bar. The value ranges from –360 to 360. A negative number indicates anticlockwise.|
82| center-x | &lt;length&gt; | - | No| Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with **center-y** and **radius**.|
83| center-y | &lt;length&gt; | - | No| Center of the arc progress bar (with the upper left corner of this widget as the coordinate origin). This style must be used together with **center-x** and **radius**.|
84| radius | &lt;length&gt; | - | No| Radius of the arc progress bar. This style must be used together with **center-x** and **center-y**.|
85
86
87## Events
88
89The [universal events](js-service-widget-common-events.md) are supported.
90
91
92## Example
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 x 4 widget**
120
121![progress](figures/progress.png)
122