1# Progress 2 3The **\<Progress>** component is used to provide a progress indicator that displays the progress of content loading or an operation. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17Progress(options: {value: number, total?: number, type?: ProgressType}) 18 19Creates a progress indicator. 20 21Since API version 9, this API is supported in ArkTS widgets. 22 23**Parameters** 24 25| Name| Type| Mandatory| Description| 26| -------- | -------- | -------- | -------- | 27| value | number | Yes| Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used.<br>Since API version 9, this API is supported in ArkTS widgets.| 28| total | number | No| Total progress.<br>Default value: **100**<br>Since API version 9, this API is supported in ArkTS widgets.| 29| type<sup>8+</sup> | [ProgressType](#progresstype) | No| Style the progress indicator.<br>Default value: **ProgressType.Linear**<br>Since API version 9, this API is supported in ArkTS widgets.| 30| style<sup>deprecated</sup> | [ProgressStyle](#progressstyle) | No| Type of the progress indicator.<br>This parameter is deprecated since API version 8. You are advised to use **type** instead.<br>Default value: **ProgressStyle.Linear**| 31 32## ProgressType 33 34Since API version 9, this API is supported in ArkTS widgets. 35 36| Name| Description| 37| -------- | -------- | 38| Linear | Linear type. Since API version 9, the progress indicator adaptively switches to vertical layout if the height is greater than the width.| 39| Ring<sup>8+</sup> | Indeterminate ring type. The ring fills up as the progress increases.| 40| Eclipse<sup>8+</sup> | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.| 41| ScaleRing<sup>8+</sup> | Determinate ring type, which is similar to the clock scale. Since API version 9, when the outer circles of scales overlap, the progress indicator is automatically converted to the **Ring** type.| 42| Capsule<sup>8+</sup> | Capsule type. At both ends, the progress indicator works in a same manner as the eclipse type. In the middle part of the capsule, the progress indicator works in a same manner as the linear type. If the height is greater than the width, the progress indicator adaptively switches to vertical layout.| 43 44## ProgressStyle 45 46Since API version 9, this API is supported in ArkTS widgets. 47 48| Name | Description | 49| --------- | ------------------------------------------------------------ | 50| Linear | Linear type.| 51| Ring | Indeterminate ring type. The ring fills up as the progress increases.| 52| Eclipse | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.| 53| ScaleRing | Determinate ring type, which is similar to the clock scale.| 54| Capsule | Capsule type. At both ends, the progress indicator works in a same manner as the eclipse type. In the middle part of the capsule, the progress indicator works in a same manner as the linear type. If the height is greater than the width, the progress indicator adaptively switches to vertical layout.| 55 56## Attributes 57 58| Name| Type| Description| 59| -------- | -------- | -------- | 60| value | number | Current progress. If the value is less than 0, the value **0** is used. If the value is greater than that of **total**, the value of **total** is used. Invalid values do not take effect.<br>Since API version 9, this API is supported in ArkTS widgets.| 61| color | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.<br>Since API version 9, this API is supported in ArkTS widgets.| 62| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the progress indicator.<br>Since API version 9, this API is supported in ArkTS widgets.| 63| style<sup>8+</sup> | {<br>strokeWidth?: [Length](ts-types.md#length),<br>scaleCount?: number,<br>scaleWidth?: [Length](ts-types.md#length)<br>} | Component style.<br>- **strokeWidth**: stroke width of the progress indicator. It cannot be set in percentage. Since API version 9, if the stroke width of the ring progress bar is greater than or equal to the radius, the width is changed to half of the radius.<br>Default value: **4.0Vp**<br>- **scaleCount**: number of divisions on the determinate ring-type process indicator.<br>Default value: **120**<br>- **scaleWidth**: scale width of the ring progress bar. It cannot be set in percentage. If it is greater than the value of **strokeWidth**, the default scale width is used.<br>Default value: **2.0Vp**<br>Since API version 9, this API is supported in ArkTS widgets.| 64 65## Events 66 67The [universal events](ts-universal-events-click.md) are supported. 68 69## Example 70 71```ts 72// xxx.ets 73@Entry 74@Component 75struct ProgressExample { 76 build() { 77 Column({ space: 15 }) { 78 Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 79 Progress({ value: 10, type: ProgressType.Linear }).width(200) 80 Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200) 81 82 83 Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 84 Row({ space: 40 }) { 85 Progress({ value: 10, type: ProgressType.Eclipse }).width(100) 86 Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100) 87 } 88 89 Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 90 Row({ space: 40 }) { 91 Progress({ value: 10, type: ProgressType.ScaleRing }).width(100) 92 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 93 .color(Color.Grey).value(50).width(100) 94 .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 }) 95 } 96 97 // scaleCount vs. scaleWidth 98 Row({ space: 40 }) { 99 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 100 .color(Color.Grey).value(50).width(100) 101 .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 }) 102 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 103 .color(Color.Grey).value(50).width(100) 104 .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 }) 105 } 106 107 Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 108 Row({ space: 40 }) { 109 Progress({ value: 10, type: ProgressType.Ring }).width(100) 110 Progress({ value: 20, total: 150, type: ProgressType.Ring }) 111 .color(Color.Grey).value(50).width(100) 112 .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 }) 113 } 114 115 Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 116 Row({ space: 40 }) { 117 Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50) 118 Progress({ value: 20, total: 150, type: ProgressType.Capsule }) 119 .color(Color.Grey) 120 .value(50) 121 .width(100) 122 .height(50) 123 } 124 }.width('100%').margin({ top: 30 }) 125 } 126} 127``` 128 129 130
