progress
The <Progress> component is used to provide a progress bar that displays the progress of content loading or an operation.
NOTE
The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
Child Components
Not supported
Attributes
In addition to the universal attributes, the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
| type | string | horizontal | No | Type of the progress bar, which cannot be changed dynamically. Available values are as follows: - horizontal: linear progress bar. - circular: loading progress bar. - ring: ring progress bar. - scale-ring: ring progress bar with a scale. - arc: arc progress bar. - eclipse: eclipse progress bar. |
Different types of progress bars support different attributes.
-
When the type is horizontal, ring, or scale-ring, the following attributes are supported. |Name|Type|Default Value|Mandatory|Description| |--------|--------|--------|--------|--------| |percent|number|0|No|Current progress. The value ranges from 0 to 100.| |secondarypercent(Rich)|number|0|No|Secondary progress. The value ranges from 0 to 100.|
-
When the type is ring or scale-ring, the following attributes are supported. |Name|Type|Default Value|Mandatory|Description| |--------|--------|--------|--------|--------| |clockwise|boolean|true|No|Whether the ring progress bar moves in a clockwise direction.|
-
When the type is arc, the following attributes are supported. |Name|Type|Default Value|Mandatory|Description| |--------|--------|--------|--------|--------| |percent|number|0|No|Current progress. The value ranges from 0 to 100.|
Styles
In addition to the universal styles, the following styles are supported.
When the type is horizontal, the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
| color | <color> | #ff007dff | No | Color of the progress bar. |
| stroke-width | <length> | 4px | No | Stroke width of the progress bar. |
| background-color | <color> | - | No | Background color of the progress bar. |
| secondary-color | <color> | - | No | Color of the secondary progress bar. |
When the type is circular, the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
| color | <color> | - | No | Color of the dot on the loading progress bar. |
When the type is ring or scale-ring, the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
| color | <color> | <linear-gradient> | - | No | Color of the ring progress bar. The ring type supports the linear gradient defined by two colors, for example, color = linear-gradient(#ff0000, #00ff00). |
| background-color | <color> | - | No | Background color of the ring progress bar. |
| secondary-color | <color> | - | No | Color of the secondary ring progress bar. |
| stroke-width | <length> | 10px | No | Width of the ring progress bar. |
| scale-width | <length> | - | No | Scale thickness of the ring progress bar with a scale. This style takes effect only when the type is scale-ring. |
| 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. |
When the type is arc, the following styles are supported.
| Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
| color | <color> | - | No | Color of the arc progress bar. |
| background-color | <color> | - | No | Background color of the arc progress bar. |
| stroke-width | <length> | - | No | Stroke width of the arc progress bar. 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. |
| start-angle | <deg> | 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). |
| total-angle | <deg> | 240 | No | Total length of the arc progress bar. The value ranges from –360 to 360. A negative number indicates anticlockwise. |
| center-x | <length> | - | 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. |
| center-y | <length> | - | 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. |
| radius | <length> | - | No | Radius of the arc progress bar. This style must be used together with center-x and center-y. |
Events
The universal events are supported.
Example
<!--xxx.hml -->
<div class="container">
<progress class="min-progress" type="scale-ring" percent= "10" secondarypercent="50"></progress>
<progress class="min-progress" type="horizontal" percent= "10" secondarypercent="50"></progress>
<progress class="min-progress" type="arc" percent= "10"></progress>
<progress class="min-progress" type="ring" percent= "10" secondarypercent="50"></progress>
</div>
/* xxx.css */
.container {
flex-direction: column;
height: 100%;
width: 100%;
align-items: center;
}
.min-progress {
width: 300px;
height: 300px;
}
4 x 4 widget
