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