1# progress 2 3> **NOTE** 4> 5> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6 7The **\<Progress>** component is used to provide a progress bar that displays the progress of content loading or an operation. 8 9## Required Permissions 10 11None 12 13 14## Child Components 15 16Not supported 17 18 19## Attributes 20 21In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. 22 23| Name | Type | Default Value | Mandatory | Description | 24| ---- | ------ | ---------- | ---- | ---------------------------------------- | 25| 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**<sup>5+</sup>: eclipse progress bar.| 26 27Different types of progress bars support different attributes. 28 29- When the type is **horizontal**, **ring**, or **scale-ring**, the following attributes are supported. 30 | Name | Type | Default Value | Mandatory | Description | 31 | ---------------- | ------ | ---- | ---- | ---------------- | 32 | percent | number | 0 | No | Current progress. The value ranges from 0 to 100.| 33 | secondarypercent | number | 0 | No | Secondary progress. The value ranges from 0 to 100.| 34 35- When the type is **ring** or **scale-ring**, the following attributes are supported. 36 | Name | Type | Default Value | Mandatory | Description | 37 | --------- | ------- | ---- | ---- | -------------- | 38 | clockwise | boolean | true | No | Whether the ring progress bar uses clockwise.| 39 40- When the type is **arc** or **eclipse**<sup>5+</sup>, the following attributes are supported. 41 | Name | Type | Default Value | Mandatory | Description | 42 | ------- | ------ | ---- | ---- | ---------------- | 43 | percent | number | 0 | No | Current progress. The value ranges from 0 to 100.| 44 45 46## Styles 47 48In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. 49 50Horizontal progress bar, of which **type** is **horizontal** 51 52| Name | Type | Default Value | Mandatory | Description | 53| ---------------- | -------------- | ---------- | ---- | ----------- | 54| color | <color> | \#ff007dff | No | Color of the progress bar. | 55| stroke-width | <length> | 4px | No | Stroke width of the progress bar. | 56| background-color | <color> | - | No | Background color of the progress bar. | 57| secondary-color | <color> | - | No | Color of the secondary progress bar.| 58 59Circular progress bar, of which **type** is **circular** 60 61| Name | Type | Default Value | Mandatory | Description | 62| ----- | ------------- | ---- | ---- | ----------------- | 63| color | <color> | - | No | Color of the dot on the loading progress bar.| 64 65Ring or scale-ring progress bar, of which **ring** is **scale-ring** 66 67| Name | Type | Default Value | Mandatory | Description | 68| ---------------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | 69| color | <color> \| <linear-gradient> | - | No | Color of the ring progress bar. The **ring** type supports the linear gradient color.<br>The linear gradient color supports only two color attribute formats, for example, **color = linear-gradient(\#ff0000, \#00ff00)**.| 70| background-color | <color> | - | No | Background color of the ring progress bar. | 71| secondary-color | <color> | - | No | Color of the secondary ring progress bar. | 72| stroke-width | <length> | 10px | No | Width of the ring progress bar. | 73| 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**. | 74| 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**. | 75 76Arc progress bar, of which **type** is **arc** 77 78| Name | Type | Default Value | Mandatory | Description | 79| ---------------- | -------------- | ------------- | ---- | ---------------------------------------- | 80| color | <color> | - | No | Color of the arc progress bar. | 81| background-color | <color> | - | No | Background color of the arc progress bar. | 82| stroke-width | <length> | 4px | No | Width of the arc progress bar, which is always within the radius area.<br>The wider the progress bar is, the closer the progress bar is to the center of the circle. The progress bar is always within the radius.| 83| start-angle | <deg> | 240 | No | Start angle of the arc progress bar, which starts from zero o'clock clockwise. The value ranges from 0 to 360 degrees. | 84| total-angle | <deg> | 240 | No | Total length of the arc progress bar. The value ranges from –360 to 360. A negative number indicates anticlockwise. | 85| center-x | <length> | Half of the width of the arc progress bar | No | Center of the arc progress bar (with the upper left corner of the component as the coordinate origin). This style must be used together with **center-y** and **radius**.| 86| center-y | <length> | Half of the height of the arc progress bar | No | Center of the arc progress bar (with the upper left corner of the component as the coordinate origin). This style must be used together with **center-x** and **radius**.| 87| radius | <length> | Half of the minimum width and height of the arc progress bar| No | Radius of the arc progress bar. This style must be used together with **center-x** and **center-y**. | 88 89Eclipse progress bar, of which **type** is **eclipse**<sup>5+</sup> 90 91| Name | Type | Default Value | Mandatory | Description | 92| ---------------- | ------------- | ---- | ---- | ---------- | 93| color | <color> | - | No | Color of the eclipse progress bar. | 94| background-color | <color> | - | No | Background color of the eclipse progress bar.| 95 96 97## Events 98 99The [universal events](../arkui-js/js-components-common-events.md) are supported. 100 101## Methods 102 103The [universal methods](../arkui-js/js-components-common-methods.md) are supported. 104 105 106## Example 107 108```html 109<!--xxx.hml --> 110<div class="container"> 111 <progress class="min-progress" type="scale-ring" percent= "10" secondarypercent="50"></progress> 112 <progress class="min-progress" type="horizontal" percent= "10" secondarypercent="50"></progress> 113 <progress class="min-progress" type="arc" percent= "10"></progress> 114 <progress class="min-progress" type="ring" percent= "10" secondarypercent="50"></progress> 115</div> 116``` 117 118```css 119/* xxx.css */ 120.container { 121 flex-direction: column; 122 height: 100%; 123 width: 100%; 124 align-items: center; 125} 126.min-progress { 127 width: 300px; 128 height: 300px; 129} 130``` 131 132 133
