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 change to the set value takes place gradually. Otherwise, it takes place immediately.<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 | Rounded 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 314 315This example shows the effect of the basic attributes for different types of progress indicators. 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 378 379This example shows the effect of visual attributes of the ring style progress indicator. 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 build() { 389 Column({ space: 15 }) { 390 Text('Gradient Color').fontSize(9).fontColor(0xCCCCCC).width('90%') 391 Progress({ value: 70, total: 100, type: ProgressType.Ring }) 392 .width(100).style({ strokeWidth: 20 }) 393 .color(this.gradientColor) 394 395 Text('Shadow').fontSize(9).fontColor(0xCCCCCC).width('90%') 396 Progress({ value: 70, total: 100, type: ProgressType.Ring }) 397 .width(120).color(Color.Orange) 398 .style({ strokeWidth: 20, shadow: true }) 399 }.width('100%').padding({ top: 5 }) 400 } 401} 402``` 403 404 405### Example 3 406 407This example shows the animation effect of the ring style progress indicator. 408 409```ts 410// xxx.ets 411@Entry 412@Component 413struct ProgressExample { 414 private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 }, 415 { color: Color.Orange, offset: 1.0 }]) 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 434 435This example shows the effect of visual attributes of the capsule style progress indicator. 436 437```ts 438// xxx.ets 439@Entry 440@Component 441struct ProgressExample { 442 443 build() { 444 Column({ space: 15 }) { 445 Row({ space: 40 }) { 446 Progress({ value: 100, total: 100,type: ProgressType.Capsule }).width(100).height(50) 447 .style({borderColor: Color.Blue, borderWidth: 1, content: 'Installing...', 448 font: {size: 13, style: FontStyle.Normal}, fontColor: Color.Gray, 449 enableScanEffect: false, showDefaultPercentage: false}) 450 } 451 }.width('100%').padding({ top: 5 }) 452 } 453} 454``` 455 456 457### Example 5 458 459This example shows the smooth effect. 460 461```ts 462// xxx.ets 463@Entry 464@Component 465struct Index { 466 @State value: number = 0 467 468 build() { 469 Column({space: 10}) { 470 Text('enableSmoothEffect: true').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5) 471 .margin({top: 20}) 472 Progress({value: this.value, total: 100, type:ProgressType.Linear}) 473 .style({strokeWidth: 10, enableSmoothEffect: true}) 474 475 Text('enableSmoothEffect: false').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5) 476 Progress({value: this.value, total: 100, type:ProgressType.Linear}) 477 .style({strokeWidth: 10, enableSmoothEffect: false}) 478 479 Button('value +10').onClick(() => { 480 this.value += 10 481 }) 482 .width(75) 483 .height(15) 484 .fontSize(9) 485 } 486 .width('50%') 487 .height('100%') 488 .margin({left:20}) 489 } 490} 491 492``` 493 494 495### Example 6 496 497This example implements a custom progress indicator featuring a star-shaped design. The total progress is set to **3**, and the current value can be incremented or decremented through buttons. The achieved progress is filled with a custom color. 498 499```ts 500// xxx.ets 501class MyProgressModifier implements ContentModifier<ProgressConfiguration> { 502 color: Color = Color.White 503 504 505 constructor(color:Color) { 506 this.color = color 507 } 508 applyContent() : WrappedBuilder<[ProgressConfiguration]> 509 { 510 return wrapBuilder(myProgress) 511 } 512} 513 514@Builder function myProgress(config: ProgressConfiguration ) { 515 516 Column({space:30}) { 517 Text("Current progress: " + config.value + "/" + config.total).fontSize(20) 518 Row() { 519 Flex({ justifyContent: FlexAlign.SpaceBetween }) { 520 Path() 521 .width('30%') 522 .height('30%') 523 .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') 524 .fill(config.enabled && config.value >=1 ? (config.contentModifier as MyProgressModifier).color : Color.White) 525 .stroke(Color.Black) 526 .strokeWidth(3) 527 Path() 528 .width('30%') 529 .height('30%') 530 .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') 531 .fill(config.enabled && config.value >=2 ? (config.contentModifier as MyProgressModifier).color : Color.White) 532 .stroke(Color.Black) 533 .strokeWidth(3) 534 Path() 535 .width('30%') 536 .height('30%') 537 .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') 538 .fill(config.enabled && config.value >=3 ? (config.contentModifier as MyProgressModifier).color : Color.White) 539 .stroke(Color.Black) 540 .strokeWidth(3) 541 }.width('100%') 542 } 543 }.margin({bottom:100}) 544} 545 546@Entry 547@Component 548struct Index { 549 @State currentValue: number = 0 550 modifier = new MyProgressModifier(Color.Red) 551 @State myModifier:(MyProgressModifier | undefined) = this.modifier 552 build() { 553 Column() { 554 Progress({ value: this.currentValue, total: 3, type: ProgressType.Ring}).contentModifier(this.modifier) 555 Button('Progress++').onClick(()=>{ 556 if (this.currentValue < 3) { 557 this.currentValue += 1 558 } 559 }).width('30%') 560 Button('addProgress--').onClick(()=>{ 561 if (this.currentValue > 0) { 562 this.currentValue -= 1 563 } 564 }).width('30%') 565 }.width('100%').height('100%') 566 } 567} 568 569``` 570 571 572### Example 7 573 574This example shows how to enable privacy mode, which requires widget framework support. 575 576```ts 577@Entry 578@Component 579struct ProgressExample { 580 build() { 581 Scroll() { 582 Column({ space: 15 }) { 583 Row() { 584 Progress({ value: 50, total: 100, type: ProgressType.Capsule }).width(100).height(50) 585 .style({ 586 borderColor: Color.Blue, 587 borderWidth: 1, 588 content: 'Installing...', 589 font: { size: 13, style: FontStyle.Normal }, 590 fontColor: Color.Gray, 591 enableScanEffect: false, 592 showDefaultPercentage: true 593 }) 594 .privacySensitive(true) 595 } 596 } 597 } 598 } 599} 600``` 601 602
