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-universal-attributes-size.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.<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.| 192| total | number | Yes| Indicates the total progress. | 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**| 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**| 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** | 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**| 246 247## RingStyleOptions<sup>10+</sup> 248 249Inherits [ScanEffectOptions](#scaneffectoptions10) and [CommonProgressStyleOptions](#commonprogressstyleoptions10). 250 251**Atomic service API**: This API can be used in atomic services since API version 11. 252 253**System capability**: SystemCapability.ArkUI.ArkUI.Full 254 255| Name | Type | Mandatory| Description | 256| ------------- | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | 257| 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**| 258| shadow | boolean | No | Whether to enable the shadow effect.<br>Default value: **false** | 259| 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**| 260 261## LinearStyleOptions<sup>10+</sup> 262 263Inherits [ScanEffectOptions](#scaneffectoptions10) and [CommonProgressStyleOptions](#commonprogressstyleoptions10). 264 265**Atomic service API**: This API can be used in atomic services since API version 11. 266 267**System capability**: SystemCapability.ArkUI.ArkUI.Full 268 269| Name | Type | Mandatory| Description | 270| ------------- | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | 271| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.<br>Default value: **4.0vp**| 272| 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**| 273 274## ScaleRingStyleOptions<sup>10+</sup> 275 276Inherits [CommonProgressStyleOptions](#commonprogressstyleoptions10). 277 278**Atomic service API**: This API can be used in atomic services since API version 11. 279 280**System capability**: SystemCapability.ArkUI.ArkUI.Full 281 282| Name | Type | Mandatory| Description | 283| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | 284| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.<br>Default value: **4.0vp** | 285| scaleCount | number | No | Number of divisions on the ring-style process indicator.<br>Default value: **120** | 286| 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**| 287 288## EclipseStyleOptions<sup>10+</sup> 289 290Inherits [CommonProgressStyleOptions](#commonprogressstyleoptions10). 291 292**Atomic service API**: This API can be used in atomic services since API version 11. 293 294**System capability**: SystemCapability.ArkUI.ArkUI.Full 295 296## ProgressStatus<sup>10+</sup> 297 298**Atomic service API**: This API can be used in atomic services since API version 11. 299 300**System capability**: SystemCapability.ArkUI.ArkUI.Full 301 302| Name | Description | 303| ----------------------- | ---------------- | 304| LOADING | Loading.| 305| PROGRESSING | The progress is being updated.| 306 307## Events 308 309The [universal events](ts-universal-events-click.md) are supported. 310 311## Example 312 313### Example 1: Setting Progress Indicator Types 314 315This example demonstrates how to set different types of progress indicators using the **type** attribute. 316 317```ts 318// xxx.ets 319@Entry 320@Component 321struct ProgressExample { 322 build() { 323 Column({ space: 15 }) { 324 Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 325 Progress({ value: 10, type: ProgressType.Linear }).width(200) 326 Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200) 327 328 329 Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 330 Row({ space: 40 }) { 331 Progress({ value: 10, type: ProgressType.Eclipse }).width(100) 332 Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100) 333 } 334 335 Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 336 Row({ space: 40 }) { 337 Progress({ value: 10, type: ProgressType.ScaleRing }).width(100) 338 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 339 .color(Color.Grey).value(50).width(100) 340 .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 }) 341 } 342 343 // scaleCount vs. scaleWidth 344 Row({ space: 40 }) { 345 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 346 .color(Color.Grey).value(50).width(100) 347 .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 }) 348 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 349 .color(Color.Grey).value(50).width(100) 350 .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 }) 351 } 352 353 Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 354 Row({ space: 40 }) { 355 Progress({ value: 10, type: ProgressType.Ring }).width(100) 356 Progress({ value: 20, total: 150, type: ProgressType.Ring }) 357 .color(Color.Grey).value(50).width(100) 358 .style({ strokeWidth: 20 }) 359 } 360 361 Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 362 Row({ space: 40 }) { 363 Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50) 364 Progress({ value: 20, total: 150, type: ProgressType.Capsule }) 365 .color(Color.Grey) 366 .value(50) 367 .width(100) 368 .height(50) 369 } 370 }.width('100%').margin({ top: 30 }) 371 } 372} 373``` 374 375 376 377### Example 2: Setting Ring Progress Indicator Attributes 378 379This example demonstrates how to set attributes of a ring progress indicator using the **strokeWidth** and **shadow** properties in the **style** API. 380 381```ts 382// xxx.ets 383@Entry 384@Component 385struct ProgressExample { 386 private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 }, 387 { color: Color.Orange, offset: 1.0 }]) 388 389 build() { 390 Column({ space: 15 }) { 391 Text('Gradient Color').fontSize(9).fontColor(0xCCCCCC).width('90%') 392 Progress({ value: 70, total: 100, type: ProgressType.Ring }) 393 .width(100).style({ strokeWidth: 20 }) 394 .color(this.gradientColor) 395 396 Text('Shadow').fontSize(9).fontColor(0xCCCCCC).width('90%') 397 Progress({ value: 70, total: 100, type: ProgressType.Ring }) 398 .width(120).color(Color.Orange) 399 .style({ strokeWidth: 20, shadow: true }) 400 }.width('100%').padding({ top: 5 }) 401 } 402} 403``` 404 405 406### Example 3: Setting the Animation for the Ring Progress Indicator 407 408This example demonstrates how to enable or disable animations for a ring progress indicator using the **status** and **enableScanEffect** properties in the **style** API. 409 410```ts 411// xxx.ets 412@Entry 413@Component 414struct ProgressExample { 415 build() { 416 Column({ space: 15 }) { 417 Text('Loading Effect').fontSize(9).fontColor(0xCCCCCC).width('90%') 418 Progress({ value: 0, total: 100, type: ProgressType.Ring }) 419 .width(100).color(Color.Blue) 420 .style({ strokeWidth: 20, status: ProgressStatus.LOADING }) 421 422 Text('Scan Effect').fontSize(9).fontColor(0xCCCCCC).width('90%') 423 Progress({ value: 30, total: 100, type: ProgressType.Ring }) 424 .width(100).color(Color.Orange) 425 .style({ strokeWidth: 20, enableScanEffect: true }) 426 }.width('100%').padding({ top: 5 }) 427 } 428} 429``` 430 431 432### Example 4: Setting Capsule Progress Indicator Attributes 433 434This example demonstrates how to set attributes for a capsule progress indicator using properties such as **borderColor**, **borderWidth**, and **content** in the **style** API. 435 436```ts 437// xxx.ets 438@Entry 439@Component 440struct ProgressExample { 441 build() { 442 Column({ space: 15 }) { 443 Row({ space: 40 }) { 444 Progress({ value: 100, total: 100, type: ProgressType.Capsule }).width(100).height(50) 445 .style({ 446 borderColor: Color.Blue, 447 borderWidth: 1, 448 content: 'Installing...', 449 font: { size: 13, style: FontStyle.Normal }, 450 fontColor: Color.Gray, 451 enableScanEffect: false, 452 showDefaultPercentage: false 453 }) 454 } 455 }.width('100%').padding({ top: 5 }) 456 } 457} 458``` 459 460 461### Example 5: Setting the Smooth Effect 462 463This example demonstrates how to enable or disable the smooth effect for the progress animation using the **enableSmoothEffect** property in the **style** API. 464 465```ts 466// xxx.ets 467@Entry 468@Component 469struct Index { 470 @State value: number = 0 471 472 build() { 473 Column({ space: 10 }) { 474 Text('enableSmoothEffect: true') 475 .fontSize(9) 476 .fontColor(0xCCCCCC) 477 .width('90%') 478 .margin(5) 479 .margin({ top: 20 }) 480 Progress({ value: this.value, total: 100, type: ProgressType.Linear }) 481 .style({ strokeWidth: 10, enableSmoothEffect: true }) 482 483 Text('enableSmoothEffect: false').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5) 484 Progress({ value: this.value, total: 100, type: ProgressType.Linear }) 485 .style({ strokeWidth: 10, enableSmoothEffect: false }) 486 487 Button('value +10').onClick(() => { 488 this.value += 10 489 }) 490 .width(75) 491 .height(15) 492 .fontSize(9) 493 } 494 .width('50%') 495 .height('100%') 496 .margin({ left: 20 }) 497 } 498} 499 500``` 501 502 503### Example 6: Setting the Custom Content Area 504 505This 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. 506 507```ts 508// xxx.ets 509class MyProgressModifier implements ContentModifier<ProgressConfiguration> { 510 color: Color = Color.White 511 512 constructor(color: Color) { 513 this.color = color 514 } 515 516 applyContent(): WrappedBuilder<[ProgressConfiguration]> { 517 return wrapBuilder(myProgress) 518 } 519} 520 521@Builder 522function myProgress(config: ProgressConfiguration) { 523 524 Column({ space: 30 }) { 525 Text("Current progress: " + config.value + "/" + config.total).fontSize(20) 526 Row() { 527 Flex({ justifyContent: FlexAlign.SpaceBetween }) { 528 Path() 529 .width('30%') 530 .height('30%') 531 .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') 532 .fill(config.enabled && config.value >= 1 ? (config.contentModifier as MyProgressModifier).color : 533 Color.White) 534 .stroke(Color.Black) 535 .strokeWidth(3) 536 Path() 537 .width('30%') 538 .height('30%') 539 .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') 540 .fill(config.enabled && config.value >= 2 ? (config.contentModifier as MyProgressModifier).color : 541 Color.White) 542 .stroke(Color.Black) 543 .strokeWidth(3) 544 Path() 545 .width('30%') 546 .height('30%') 547 .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') 548 .fill(config.enabled && config.value >= 3 ? (config.contentModifier as MyProgressModifier).color : 549 Color.White) 550 .stroke(Color.Black) 551 .strokeWidth(3) 552 }.width('100%') 553 } 554 }.margin({ bottom: 100 }) 555} 556 557@Entry 558@Component 559struct Index { 560 @State currentValue: number = 0 561 modifier = new MyProgressModifier(Color.Red) 562 @State myModifier: (MyProgressModifier | undefined) = this.modifier 563 564 build() { 565 Column() { 566 Progress({ value: this.currentValue, total: 3, type: ProgressType.Ring }).contentModifier(this.modifier) 567 Button('Progress++').onClick(() => { 568 if (this.currentValue < 3) { 569 this.currentValue += 1 570 } 571 }).width('30%') 572 Button('addProgress--').onClick(() => { 573 if (this.currentValue > 0) { 574 this.currentValue -= 1 575 } 576 }).width('30%') 577 }.width('100%').height('100%') 578 } 579} 580 581``` 582 583 584### Example 7: Securing Sensitive Information 585 586This example illustrates how to secure sensitive information using the **privacySensitive** attribute. Note that the display requires widget framework support. 587 588```ts 589@Entry 590@Component 591struct ProgressExample { 592 build() { 593 Scroll() { 594 Column({ space: 15 }) { 595 Row() { 596 Progress({ value: 50, total: 100, type: ProgressType.Capsule }).width(100).height(50) 597 .style({ 598 borderColor: Color.Blue, 599 borderWidth: 1, 600 content: 'Installing...', 601 font: { size: 13, style: FontStyle.Normal }, 602 fontColor: Color.Gray, 603 enableScanEffect: false, 604 showDefaultPercentage: true 605 }) 606 .privacySensitive(true) 607 } 608 } 609 } 610 } 611} 612``` 613 614
