1# progress 2 3The **\<Progress>** component is used to provide a progress bar that displays the progress of content loading or an operation. 4 5> **NOTE** 6> 7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## Attributes 16 17| Name| Type| Default Value| Mandatory| Description| 18| -------- | -------- | -------- | -------- | -------- | 19| 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>- **arc**: arc progress bar.| 20| id | string | - | No| Unique ID of the component.| 21| style | string | - | No| Style declaration of the component.| 22| class | string | - | No| Style class of the component, which is used to refer to a style table.| 23| ref | string | - | No| Reference information of child elements, which is registered with the parent component on **$refs**.| 24 25Different types of progress bars support different attributes. 26 27- When **type** is set to **horizontal**, the following attributes are supported. 28 | Name| Type| Default Value| Mandatory| Description| 29 | -------- | -------- | -------- | -------- | -------- | 30 | percent | number | 0 | No| Current progress. The value ranges from 0 to 100.| 31 32- When **type** is set to **arc**, the following attributes are supported. 33 | Name| Type| Default Value| Mandatory| Description| 34 | -------- | -------- | -------- | -------- | -------- | 35 | percent | number | 0 | No| Current progress. The value ranges from 0 to 100.| 36 37 38## Events 39 40| Name| Parameter| Description| 41| -------- | -------- | -------- | 42| click | - | Triggered when the component is clicked. | 43| longpress | - | Triggered when the component is long pressed. | 44| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component. | 45 46 47## Styles 48 49- When **type** is set to **horizontal**, the following styles are supported. 50 51 | Name | Type | Default Value | Mandatory| Description | 52 | ------------ | -------------- | ---------------------------------------------- | ---- | ------------------ | 53 | color | <color> | \#6b9ac7 | No | Color of the progress bar.| 54 | stroke-width | <length> | 32<sup>1-4 </sup>\| 4<sup>5+</sup>px | No | Stroke width of the progress bar.| 55 56- When **type** is set to **arc**, the following styles are supported. 57 58 | Name | Type | Default Value| Mandatory| Description | 59 | ---------------- | -------------- | ------ | ---- | ------------------------------------------------------------ | 60 | color | <color> | - | No | Color of the arc progress bar. | 61 | background-color | <color> | - | No | Background color of the arc progress bar. | 62 | stroke-width | <length> | - | No | 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.| 63 | 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).| 64 | total-angle | <deg> | 240 | No | Total length of the arc progress bar. The value ranges from –360 to 360. A negative number indicates anticlockwise.| 65 | 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**.| 66 | 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**.| 67 | radius | <length> | - | No | Radius of the arc progress bar. This style must be used together with **center-x** and **center-y**. | 68 69In addition to the preceding styles, the following styles are supported. 70 71| Name| Type| Default Value| Mandatory| Description| 72| -------- | -------- | -------- | -------- | -------- | 73| width | <length> \| <percentage><sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used.| 74| height | <length> \| <percentage><sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used.| 75| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| 76| padding-[left\|top\|right\|bottom] | <length> | 0 | No| Left, top, right, and bottom padding.| 77| margin | <length> \| <percentage><sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| 78| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.| 79| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| 80| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| 81| border-radius | <length> | - | No| Radius of round-corner borders.| 82| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| 83| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | No| Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element. | 84 85## Example 86 87```html 88<!-- xxx.hml --> 89<div class="container"> 90 <progress type="horizontal" percent="{{horizontalVal}}" style="height: 10%;width: 40%;" onclick = "changeHorizontal"></progress> 91 <progress type="arc" class="min-progress" percent="{{arcVal}}" on:click="changeArc"></progress> 92</div> 93``` 94 95```css 96/* xxx.css */ 97.container { 98 flex-direction: column; 99 height: 100%; 100 width: 100%; 101 align-items: center; 102} 103.min-progress { 104 width: 300px; 105 height: 300px; 106} 107``` 108 109```javascript 110// xxx.js 111export default { 112 data: { 113 arcVal: 0, 114 horizontalVal: 0 115 }, 116 changeArc() { 117 this.arcVal+= 10; 118 }, 119 changeHorizontal() { 120 this.horizontalVal+= 10; 121 } 122} 123``` 124 125 126
