1# Progress 2 3The **Progress** component represents 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## APIs 15 16Progress(options: ProgressOptions) 17 18Creates a progress indicator. 19 20**Widget capability**: This API can be used in ArkTS widgets since API version 9. 21 22**Atomic service API**: This API can be used in atomic services since API version 11. 23 24**System capability**: SystemCapability.ArkUI.ArkUI.Full 25 26**Parameters** 27 28| Name| Type| Mandatory| Description| 29| -------- | -------- | -------- | -------- | 30| options | [ProgressOptions](#progressoptionstype)| Yes| Options of the progress indicator, which vary by progress indicator type.| 31 32## ProgressOptions\<Type\> 33 34**Atomic service API**: This API can be used in atomic services since API version 11. 35 36**System capability**: SystemCapability.ArkUI.ArkUI.Full 37 38| Name | Type | Mandatory | Description | 39| -------------------------- | ----------------------------------- | ---- | ---------------------------------------- | 40| 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>Default value: **0**<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.| 41| total | number | No | Total progress. If this parameter is set to a value less than or equal to 0, the value **100** is used.<br>Default value: **100**<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.| 42| type<sup>8+</sup> | [ProgressType](#progresstype8) | No | Style of the progress indicator.<br>Default value: **ProgressType.Linear**<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.| 43| style<sup>(deprecated)</sup> | [ProgressStyle](#progressstyle) | No | Style 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**| 44 45## ProgressType<sup>8+</sup> 46 47**Widget capability**: This API can be used in ArkTS widgets since API version 9. 48 49**Atomic service API**: This API can be used in atomic services since API version 11. 50 51**System capability**: SystemCapability.ArkUI.ArkUI.Full 52 53| Name | Description | 54| ---------------------- | ---------------------------------------- | 55| Linear | Linear style. Since API version 9, the progress indicator adaptively switches to vertical layout if the height is greater than the width. | 56| Ring | Indeterminate ring style. The ring fills up as the progress increases. | 57| Eclipse | Eclipse style, which visualizes the progress in a way similar to the moon waxing from new to full. | 58| ScaleRing | Determinate ring style, 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** style.| 59| Capsule | Capsule style. At both ends, the progress indicator works in a same manner as the eclipse style. In the middle part of the capsule, the progress indicator works in a same manner as the linear style. If the height is greater than the width, the progress indicator adaptively switches to vertical layout.| 60 61## ProgressStyle 62 63**Widget capability**: This API can be used in ArkTS widgets since API version 9. 64 65**Atomic service API**: This API can be used in atomic services since API version 11. 66 67**System capability**: SystemCapability.ArkUI.ArkUI.Full 68 69| Name | Description | 70| --------- | ---------------------------------------- | 71| Linear | Linear style. | 72| Ring<sup>8+</sup> | Indeterminate ring style. The ring fills up as the progress increases. | 73| Eclipse | Eclipse style, which visualizes the progress in a way similar to the moon waxing from new to full. | 74| ScaleRing<sup>8+</sup> | Determinate ring style, which is similar to the clock scale. | 75| Capsule<sup>8+</sup> | Capsule style. At both ends, the progress indicator works in a same manner as the eclipse style. In the middle part of the capsule, the progress indicator works in a same manner as the linear style. If the height is greater than the width, the progress indicator adaptively switches to vertical layout.| 76 77## ProgressStyleMap 78 79**Atomic service API**: This API can be used in atomic services since API version 11. 80 81**System capability**: SystemCapability.ArkUI.ArkUI.Full 82 83| Name | Type | 84| --------- | ---------------------------------------- | 85| ProgressType.Linear | [LinearStyleOptions<sup>10+</sup>](#linearstyleoptions10) \| [ProgressStyleOptions<sup>8+</sup>](#progressstyleoptions8) | 86ProgressType.Ring | [RingStyleOptions<sup>10+</sup>](#ringstyleoptions10) \| [ProgressStyleOptions<sup>8+</sup>](#progressstyleoptions8) | 87ProgressType.Eclipse | [EclipseStyleOptions<sup>10+</sup>](#eclipsestyleoptions10) \| [ProgressStyleOptions<sup>8+</sup>](#progressstyleoptions8) | 88ProgressType.ScaleRing| [ScaleRingStyleOptions<sup>10+</sup>](#scaleringstyleoptions10) \| [ProgressStyleOptions<sup>8+</sup>](#progressstyleoptions8) | 89ProgressType.Capsule | [CapsuleStyleOptions<sup>10+</sup>](#capsulestyleoptions10) \| [ProgressStyleOptions<sup>8+</sup>](#progressstyleoptions8) 90 91## Attributes 92 93In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 94 95> **NOTE** 96> 97> This component overrides the universal attribute [backgroundColor](ts-universal-attributes-background.md). If the attribute is directly applied to the **Progress** component, it changes the background color of the progress indicator itself. To set the background color for the entire **Progress** component area, you'll need to apply **backgroundColor** to the outer container that wraps the **Progress** component. 98 99### value 100 101value(value: number) 102 103Current 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. 104 105**Widget capability**: This API can be used in ArkTS widgets since API version 9. 106 107**Atomic service API**: This API can be used in atomic services since API version 11. 108 109**System capability**: SystemCapability.ArkUI.ArkUI.Full 110 111**Parameters** 112 113| Name| Type | Mandatory| Description | 114| ------ | ------ | ---- | ------------ | 115| value | number | Yes | Current progress.<br> Default value: **0**| 116 117### color 118 119color(value: ResourceColor | LinearGradient) 120 121Sets the foreground color of the progress indicator. 122 123**LinearGradient** is supported for the **Ring** type since API version 10. 124 125**Widget capability**: This API can be used in ArkTS widgets since API version 9, except that **LinearGradient** is not supported. 126 127**Atomic service API**: This API can be used in atomic services since API version 11. 128 129**System capability**: SystemCapability.ArkUI.ArkUI.Full 130 131**Parameters** 132 133| Name| Type | Mandatory| Description | 134| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 135| value | [ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient<sup>10+</sup>](ts-basic-components-datapanel.md#lineargradient10) | Yes | Foreground color of the progress indicator.<br>Default value:<br>- Capsule:<br> API version 9 or earlier: **'\#ff007dff'**<br> API version 10: **'\#33006cde'**<br> API version 11 or later: **'\#33007dff'**<br>- Ring:<br> API version 9 or earlier: **'\#ff007dff'**<br> API version 10 or later: start: **'\#ff86c1ff'**, end: **'\#ff254ff7'**<br>- Other styles: **'\#ff007dff'**| 136 137### style<sup>8+</sup> 138 139style(value: ProgressStyleOptions \| CapsuleStyleOptions \| RingStyleOptions \| LinearStyleOptions \| ScaleRingStyleOptions \| EclipseStyleOptions) 140 141Sets the component style. 142 143**System capability**: SystemCapability.ArkUI.ArkUI.Full 144 145**Parameters** 146 147| Name| Type | Mandatory| Description | 148| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 149| value | [ProgressStyleOptions<sup>8+</sup>](#progressstyleoptions8) \| [CapsuleStyleOptions<sup>10+</sup>](#capsulestyleoptions10) \| <br>[RingStyleOptions<sup>10+</sup>](#ringstyleoptions10) \| [LinearStyleOptions<sup>10+</sup>](#linearstyleoptions10) \| <br>[ScaleRingStyleOptions<sup>10+</sup>](#scaleringstyleoptions10) \| [EclipseStyleOptions<sup>10+</sup>](#eclipsestyleoptions10) | Yes | Component style.<br>- **CapsuleStyleOptions**: capsule style.<br>- **RingStyleOptions**: ring style.<br>- **LinearStyleOptions**: linear style.<br>- **ScaleRingStyleOptions**: determinate ring style.<br>- **EclipseStyleOptions**: eclipse style.<br>- **ProgressStyleOptions**: basic style.<br>**ProgressStyleOptions** does not support other parameter types currently.| 150 151### contentModifier<sup>12+</sup> 152contentModifier(modifier:ContentModifier\<ProgressConfiguration\>) 153 154Creates a content modifier. 155 156**Atomic service API**: This API can be used in atomic services since API version 12. 157 158**System capability**: SystemCapability.ArkUI.ArkUI.Full 159 160**Parameters** 161| Name| Type | Mandatory| Description | 162| ------ | ------ | ---- | ------------ | 163| modifier | [ContentModifier\<ProgressConfiguration\>](#progressconfiguration12) | Yes | Content modifier to apply to the current component.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API.| 164 165### privacySensitive<sup>12+</sup> 166 167privacySensitive(isPrivacySensitiveMode: Optional\<boolean\>) 168 169Sets whether to enable privacy mode. 170 171**Widget capability**: This API can be used in ArkTS widgets since API version 12. 172 173**Atomic service API**: This API can be used in atomic services since API version 12. 174 175**System capability**: SystemCapability.ArkUI.ArkUI.Full 176 177**Parameters** 178 179| Name| Type | Mandatory| Description | 180| ------ | --------------------------------------------------------- | ---- | ----------------------------------------------------- | 181| isPrivacySensitiveMode | [Optional\<boolean\>] | Yes | Whether to enable privacy mode, in which the progress is cleared and the text is obscured. The value **true** means to enable privacy mode, and **false** means the opposite.<br>**NOTE**<br>If this parameter is set to **null**, privacy mode is disabled.<br>[Enabling privacy mode requires widget framework support.](./ts-universal-attributes-obscured.md) | 182 183## ProgressConfiguration<sup>12+</sup> 184 185**Atomic service API**: This API can be used in atomic services since API version 12. 186 187**System capability**: SystemCapability.ArkUI.ArkUI.Full 188 189| Name| Type | Mandatory|Description | 190| ------ | ------ | ------- |------------| 191| value | number | Yes| Current progress. Values less than 0 are adjusted to **0**. Values greater than the value of **total** are capped at the value of **total**.<br>Default value: **0**<br>Value range: [0, total]| 192| total | number | Yes| Indicates the total progress.<br>Value range: [0, +∞] | 193 194## CommonProgressStyleOptions<sup>10+</sup> 195 196**Atomic service API**: This API can be used in atomic services since API version 11. 197 198**System capability**: SystemCapability.ArkUI.ArkUI.Full 199 200| Name | Type | Mandatory| Description | 201| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | 202| enableSmoothEffect | boolean | No| Whether to enable the smooth effect. When this effect is enabled, the progress changes smoothly from the current value to the target value. When this effect is disabled, the progress changes abruptly to the target value.<br>Default value: **true**<br>**true**: Enable the smooth effect.<br>**false**: Disable the smooth effect.| 203 204## ScanEffectOptions<sup>10+</sup> 205 206**Atomic service API**: This API can be used in atomic services since API version 11. 207 208**System capability**: SystemCapability.ArkUI.ArkUI.Full 209 210| Name | Type| Mandatory| Description| 211| ------------- | ------- | ---- | -------- | 212| enableScanEffect | boolean | No| Whether to enable the scan effect.<br>Default value: **false**<br>**true**: Enable the scan effect.<br>**false**: Disable the scan effect.| 213 214## ProgressStyleOptions<sup>8+</sup> 215 216Inherits [CommonProgressStyleOptions](#commonprogressstyleoptions10). 217 218**Widget capability**: This API can be used in ArkTS widgets since API version 9. 219 220**Atomic service API**: This API can be used in atomic services since API version 11. 221 222**System capability**: SystemCapability.ArkUI.ArkUI.Full 223 224| Name | Type | Mandatory| Description | 225| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | 226| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.<br>Default value: **4.0vp** | 227| scaleCount | number | No | Number of divisions on the ring-style process indicator.<br>Default value: **120**<br>Value range: [2, min(width, height)/scaleWidth/2/π]. If the value is outside this range, the progress indicator is displayed in the indeterminate ring style. | 228| scaleWidth | [Length](ts-types.md#length) | No | Scale width of the ring-style 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**| 229 230## CapsuleStyleOptions<sup>10+</sup> 231 232Inherits [ScanEffectOptions](#scaneffectoptions10) and [CommonProgressStyleOptions](#commonprogressstyleoptions10). 233 234**Atomic service API**: This API can be used in atomic services since API version 11. 235 236**System capability**: SystemCapability.ArkUI.ArkUI.Full 237 238| Name | Type| Mandatory| Description| 239| ------------- | ------- | ---- | -------- | 240| borderColor | [ResourceColor](ts-types.md#resourcecolor) | No| Border color.<br>Default value:<br>API version 10: **'\#33006cde'**<br>API version 11 or later: **'\#33007dff'**| 241| borderWidth | [Length](ts-types.md#length) | No| Border width. It cannot be set in percentage.<br>Default value: **1vp**| 242| content | string | No| Text content, which can be customized .| 243| font | [Font](ts-types.md#font) | No| Text style.<br>Default value:<br>- Font size (cannot be set in percentage): **12fp**<br>- Other attributes: following the settings of the **Text** component.| 244| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color.<br>Default value: **'\#ff182431'**| 245| showDefaultPercentage | boolean | No| Whether to show the percentage of the current progress. This attribute does not take effect when the **content** attribute is set.<br>Default value: **false**.<br>**true**: Show the percentage of the current progress.<br>**false**: Do not show the percentage of the current progress.| 246| borderRadius<sup>18+</sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | No| Corner radius. The value cannot be set in percentage.<br>Value range: [0, height/2]<br> Default value: height/2<br>If an invalid value is set, the default value is used.| 247 248## RingStyleOptions<sup>10+</sup> 249 250Inherits from [ScanEffectOptions](#scaneffectoptions10) and [CommonProgressStyleOptions](#commonprogressstyleoptions10). 251 252**Atomic service API**: This API can be used in atomic services since API version 11. 253 254**System capability**: SystemCapability.ArkUI.ArkUI.Full 255 256| Name | Type | Mandatory| Description | 257| ------------- | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | 258| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage. A value greater than or equal to the radius evaluates to half of the radius.<br>Default value: **4.0vp**| 259| shadow | boolean | No | Whether to enable the shadow effect.<br>Default value: **false**.<br>**true**: Enable the shadow effect.<br>**false**: Disable the shadow effect. | 260| status | [ProgressStatus<sup>10+</sup>](#progressstatus10) | No| Status of the progress indicator. When this parameter is set to **LOADING**, the check update animation is played, and the **value** settings do not take effect. When the value changes from **LOADING** to **PROGRESSING**, the check update animation stops when it has reached the end state.<br>Default value: **ProgressStatus.PROGRESSING**| 261 262## LinearStyleOptions<sup>10+</sup> 263 264Inherits [ScanEffectOptions](#scaneffectoptions10) and [CommonProgressStyleOptions](#commonprogressstyleoptions10). 265 266**Atomic service API**: This API can be used in atomic services since API version 11. 267 268**System capability**: SystemCapability.ArkUI.ArkUI.Full 269 270| Name | Type | Mandatory| Description | 271| ------------- | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | 272| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.<br>Default value: **4.0vp**| 273| strokeRadius | [PX](ts-types.md#px10) \| [VP](ts-types.md#vp10) \| [LPX](ts-types.md#lpx10) \| [Resource](ts-types.md#resource)| No | Corner radius of the progress indicator.<br>Value range: [0, strokeWidth/2] Default value: **strokeWidth/2**| 274 275## ScaleRingStyleOptions<sup>10+</sup> 276 277Inherits [CommonProgressStyleOptions](#commonprogressstyleoptions10). 278 279**Atomic service API**: This API can be used in atomic services since API version 11. 280 281**System capability**: SystemCapability.ArkUI.ArkUI.Full 282 283| Name | Type | Mandatory| Description | 284| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | 285| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.<br>Default value: **4.0vp** | 286| scaleCount | number | No | Number of divisions on the ring-style process indicator.<br>Default value: **120**<br>Value range: [2, min(width, height)/scaleWidth/2/π]. If the value is outside this range, the progress indicator is displayed in the indeterminate ring style. | 287| scaleWidth | [Length](ts-types.md#length) | No | Scale width of the ring-style 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**| 288 289## EclipseStyleOptions<sup>10+</sup> 290 291Inherits [CommonProgressStyleOptions](#commonprogressstyleoptions10). 292 293**Atomic service API**: This API can be used in atomic services since API version 11. 294 295**System capability**: SystemCapability.ArkUI.ArkUI.Full 296 297## ProgressStatus<sup>10+</sup> 298 299**Atomic service API**: This API can be used in atomic services since API version 11. 300 301**System capability**: SystemCapability.ArkUI.ArkUI.Full 302 303| Name | Description | 304| ----------------------- | ---------------- | 305| LOADING | Loading.| 306| PROGRESSING | The progress is being updated.| 307 308## Events 309 310The [universal events](ts-component-general-events.md) are supported. 311 312## Example 313 314### Example 1: Setting Progress Indicator Types 315 316This example demonstrates how to set different types of progress indicators using the **type** attribute. 317 318```ts 319// xxx.ets 320@Entry 321@Component 322struct ProgressExample { 323 build() { 324 Column({ space: 15 }) { 325 Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 326 Progress({ value: 10, type: ProgressType.Linear }).width(200) 327 Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200) 328 329 330 Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 331 Row({ space: 40 }) { 332 Progress({ value: 10, type: ProgressType.Eclipse }).width(100) 333 Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100) 334 } 335 336 Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 337 Row({ space: 40 }) { 338 Progress({ value: 10, type: ProgressType.ScaleRing }).width(100) 339 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 340 .color(Color.Grey).value(50).width(100) 341 .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 }) 342 } 343 344 // scaleCount vs. scaleWidth 345 Row({ space: 40 }) { 346 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 347 .color(Color.Grey).value(50).width(100) 348 .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 }) 349 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 350 .color(Color.Grey).value(50).width(100) 351 .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 }) 352 } 353 354 Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 355 Row({ space: 40 }) { 356 Progress({ value: 10, type: ProgressType.Ring }).width(100) 357 Progress({ value: 20, total: 150, type: ProgressType.Ring }) 358 .color(Color.Grey).value(50).width(100) 359 .style({ strokeWidth: 20 }) 360 } 361 362 Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 363 Row({ space: 40 }) { 364 Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50) 365 Progress({ value: 20, total: 150, type: ProgressType.Capsule }) 366 .color(Color.Grey) 367 .value(50) 368 .width(100) 369 .height(50) 370 } 371 }.width('100%').margin({ top: 30 }) 372 } 373} 374``` 375 376 377 378### Example 2: Setting Ring Progress Indicator Attributes 379 380This example demonstrates how to set attributes of a ring progress indicator using the **strokeWidth** and **shadow** properties in the **style** API. 381 382```ts 383// xxx.ets 384@Entry 385@Component 386struct ProgressExample { 387 private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 }, 388 { color: Color.Orange, offset: 1.0 }]) 389 390 build() { 391 Column({ space: 15 }) { 392 Text('Gradient Color').fontSize(9).fontColor(0xCCCCCC).width('90%') 393 Progress({ value: 70, total: 100, type: ProgressType.Ring }) 394 .width(100).style({ strokeWidth: 20 }) 395 .color(this.gradientColor) 396 397 Text('Shadow').fontSize(9).fontColor(0xCCCCCC).width('90%') 398 Progress({ value: 70, total: 100, type: ProgressType.Ring }) 399 .width(120).color(Color.Orange) 400 .style({ strokeWidth: 20, shadow: true }) 401 }.width('100%').padding({ top: 5 }) 402 } 403} 404``` 405 406 407### Example 3: Setting the Animation for the Ring Progress Indicator 408 409This example demonstrates how to enable or disable animations for a ring progress indicator using the **status** and **enableScanEffect** properties in the **style** API. 410 411```ts 412// xxx.ets 413@Entry 414@Component 415struct ProgressExample { 416 build() { 417 Column({ space: 15 }) { 418 Text('Loading Effect').fontSize(9).fontColor(0xCCCCCC).width('90%') 419 Progress({ value: 0, total: 100, type: ProgressType.Ring }) 420 .width(100).color(Color.Blue) 421 .style({ strokeWidth: 20, status: ProgressStatus.LOADING }) 422 423 Text('Scan Effect').fontSize(9).fontColor(0xCCCCCC).width('90%') 424 Progress({ value: 30, total: 100, type: ProgressType.Ring }) 425 .width(100).color(Color.Orange) 426 .style({ strokeWidth: 20, enableScanEffect: true }) 427 }.width('100%').padding({ top: 5 }) 428 } 429} 430``` 431 432 433### Example 4: Setting Capsule Progress Indicator Attributes 434 435This example demonstrates how to set attributes for a capsule progress indicator using properties such as **borderColor**, **borderWidth**, and **content** in the **style** API. 436 437```ts 438// xxx.ets 439@Entry 440@Component 441struct ProgressExample { 442 build() { 443 Column({ space: 15 }) { 444 Row({ space: 40 }) { 445 Progress({ value: 100, total: 100, type: ProgressType.Capsule }).width(100).height(50) 446 .style({ 447 borderColor: Color.Blue, 448 borderWidth: 1, 449 content: 'Installing...', 450 font: { size: 13, style: FontStyle.Normal }, 451 fontColor: Color.Gray, 452 enableScanEffect: false, 453 showDefaultPercentage: false 454 }) 455 } 456 }.width('100%').padding({ top: 5 }) 457 } 458} 459``` 460 461 462### Example 5: Setting the Smooth Effect 463 464This example demonstrates how to enable or disable the smooth effect for the progress animation using the **enableSmoothEffect** property in the **style** API. 465 466```ts 467// xxx.ets 468@Entry 469@Component 470struct Index { 471 @State value: number = 0 472 473 build() { 474 Column({ space: 10 }) { 475 Text('enableSmoothEffect: true') 476 .fontSize(9) 477 .fontColor(0xCCCCCC) 478 .width('90%') 479 .margin(5) 480 .margin({ top: 20 }) 481 Progress({ value: this.value, total: 100, type: ProgressType.Linear }) 482 .style({ strokeWidth: 10, enableSmoothEffect: true }) 483 484 Text('enableSmoothEffect: false').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5) 485 Progress({ value: this.value, total: 100, type: ProgressType.Linear }) 486 .style({ strokeWidth: 10, enableSmoothEffect: false }) 487 488 Button('value +10').onClick(() => { 489 this.value += 10 490 }) 491 .width(75) 492 .height(15) 493 .fontSize(9) 494 } 495 .width('50%') 496 .height('100%') 497 .margin({ left: 20 }) 498 } 499} 500 501``` 502 503 504### Example 6: Setting the Custom Content Area 505 506This example implements a custom progress indicator using the **contentModifier** API. This progress indicator displays a star shape with a total progress of **3**, and the current value can be incremented or decremented through buttons. The achieved progress is filled with a custom color. 507 508```ts 509// xxx.ets 510class MyProgressModifier implements ContentModifier<ProgressConfiguration> { 511 color: Color = Color.White 512 513 constructor(color: Color) { 514 this.color = color 515 } 516 517 applyContent(): WrappedBuilder<[ProgressConfiguration]> { 518 return wrapBuilder(myProgress) 519 } 520} 521 522@Builder 523function myProgress(config: ProgressConfiguration) { 524 525 Column({ space: 30 }) { 526 Text("Current progress: " + config.value + "/" + config.total).fontSize(20) 527 Row() { 528 Flex({ justifyContent: FlexAlign.SpaceBetween }) { 529 Path() 530 .width('30%') 531 .height('30%') 532 .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z') 533 .fill(config.enabled && config.value >= 1 ? (config.contentModifier as MyProgressModifier).color : 534 Color.White) 535 .stroke(Color.Black) 536 .strokeWidth(3) 537 Path() 538 .width('30%') 539 .height('30%') 540 .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z') 541 .fill(config.enabled && config.value >= 2 ? (config.contentModifier as MyProgressModifier).color : 542 Color.White) 543 .stroke(Color.Black) 544 .strokeWidth(3) 545 Path() 546 .width('30%') 547 .height('30%') 548 .commands('M108 0 L141 70 L218 78.3 L162 131 L175 205 L108 170 L41.2 205 L55 131 L1 78 L75 68 L108 0 Z') 549 .fill(config.enabled && config.value >= 3 ? (config.contentModifier as MyProgressModifier).color : 550 Color.White) 551 .stroke(Color.Black) 552 .strokeWidth(3) 553 }.width('100%') 554 } 555 }.margin({ bottom: 100 }) 556} 557 558@Entry 559@Component 560struct Index { 561 @State currentValue: number = 0 562 modifier = new MyProgressModifier(Color.Red) 563 @State myModifier: (MyProgressModifier | undefined) = this.modifier 564 565 build() { 566 Column() { 567 Progress({ value: this.currentValue, total: 3, type: ProgressType.Ring }).contentModifier(this.modifier) 568 Button('Progress++').onClick(() => { 569 if (this.currentValue < 3) { 570 this.currentValue += 1 571 } 572 }).width('30%') 573 Button('addProgress--').onClick(() => { 574 if (this.currentValue > 0) { 575 this.currentValue -= 1 576 } 577 }).width('30%') 578 }.width('100%').height('100%') 579 } 580} 581 582``` 583 584 585### Example 7: Securing Sensitive Information 586 587This example illustrates how to secure sensitive information using the **privacySensitive** attribute. Note that the display requires widget framework support. 588 589```ts 590@Entry 591@Component 592struct ProgressExample { 593 build() { 594 Scroll() { 595 Column({ space: 15 }) { 596 Row() { 597 Progress({ value: 50, total: 100, type: ProgressType.Capsule }).width(100).height(50) 598 .style({ 599 borderColor: Color.Blue, 600 borderWidth: 1, 601 content: 'Installing...', 602 font: { size: 13, style: FontStyle.Normal }, 603 fontColor: Color.Gray, 604 enableScanEffect: false, 605 showDefaultPercentage: true 606 }) 607 .privacySensitive(true) 608 } 609 } 610 } 611 } 612} 613``` 614 615 616### Example 8: Setting Capsule Progress Indicator Border Radius 617 618This example demonstrates how to set the border corner radius of a capsule progress indicator using the **borderRadius** property. 619 620```ts 621import { LengthMetrics } from '@kit.ArkUI'; 622 623@Entry 624@Component 625struct ProgressExample { 626 build() { 627 Column({ space: 15 }) { 628 Text('Capsule Progress').fontSize(9).width('90%') 629 Row({ space: 15 }) { 630 Progress({ value: 30, total: 100, type: ProgressType.Capsule }) 631 .style({ content: "Default radius", borderWidth: 5 }) 632 .width(100) 633 .height(60) 634 } 635 636 Row({ space: 15 }) { 637 Progress({ value: 30, total: 100, type: ProgressType.Capsule }) 638 .style({ content: "Radius 20 vp", borderWidth: 5, borderRadius: LengthMetrics.vp(20) }) 639 .width(100) 640 .height(60) 641 } 642 } 643 .width('100%') 644 .margin({ top: 30 }) 645 } 646} 647 648``` 649 650
