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 15## APIs 16 17Progress(options: ProgressOptions\<Type\>) 18 19Creates a progress indicator. 20 21**Widget capability**: This API can be used in ArkTS widgets since API version 9. 22 23**Atomic service API**: This API can be used in atomic services since API version 11. 24 25**Parameters** 26 27| Name | Type | Mandatory | Description | 28| -------- | -------- | -------- | -------- | 29| options | ProgressOptions\<Type\> | Yes | Parameters of the progress indicator. | 30 31## ProgressOptions\<Type\> 32 33**Atomic service API**: This API can be used in atomic services since API version 11. 34 35| Name | Type | Mandatory | Description | 36| -------------------------- | ----------------------------------- | ---- | ---------------------------------------- | 37| 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. | 38| 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. | 39| 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. | 40| 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** | 41 42## ProgressType<sup>8+</sup> 43 44**Widget capability**: This API can be used in ArkTS widgets since API version 9. 45 46**Atomic service API**: This API can be used in atomic services since API version 11. 47 48| Name | Description | 49| ---------------------- | ---------------------------------------- | 50| Linear | Linear style. Since API version 9, the progress indicator adaptively switches to vertical layout if the height is greater than the width. | 51| Ring | Indeterminate ring style. The ring fills up as the progress increases. | 52| Eclipse | Eclipse style, which visualizes the progress in a way similar to the moon waxing from new to full. | 53| 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. | 54| 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. | 55 56## ProgressStyle 57 58**Widget capability**: This API can be used in ArkTS widgets since API version 9. 59 60**Atomic service API**: This API can be used in atomic services since API version 11. 61 62| Name | Description | 63| --------- | ---------------------------------------- | 64| Linear | Linear style. | 65| Ring<sup>8+</sup> | Indeterminate ring style. The ring fills up as the progress increases. | 66| Eclipse | Eclipse style, which visualizes the progress in a way similar to the moon waxing from new to full. | 67| ScaleRing<sup>8+</sup> | Determinate ring style, which is similar to the clock scale. | 68| 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. | 69 70## Attributes 71 72In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 73 74### value 75 76value(value: number) 77 78Sets the 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. 79 80**Widget capability**: This API can be used in ArkTS widgets since API version 9. 81 82**Atomic service API**: This API can be used in atomic services since API version 11. 83 84**System capability**: SystemCapability.ArkUI.ArkUI.Full 85 86**Parameters** 87 88| Name | Type | Mandatory | Description | 89| ------ | ------ | ---- | ------------ | 90| value | number | Yes | Current progress.<br> Default value: **0**| 91 92### color 93 94color(value: ResourceColor | LinearGradient) 95 96Sets the foreground color of the progress indicator. 97 98**LinearGradient** is supported for the **Ring** type since API version 12. 99 100**Widget capability**: This API can be used in ArkTS widgets since API version 9, except that **LinearGradient** is not supported. 101 102**Atomic service API**: This API can be used in atomic services since API version 11. 103 104**System capability**: SystemCapability.ArkUI.ArkUI.Full 105 106**Parameters** 107 108| Name | Type | Mandatory | Description | 109| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 110| 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'** | 111 112### backgroundColor 113 114backgroundColor(value: ResourceColor) 115 116Sets the background color of the progress indicator. The settings of the universal attribute [backgroundColor](./ts-universal-attributes-background.md#backgroundcolor) applies to the background of the progress indicator instead of the entire **Progress** component. 117 118**Widget capability**: This API can be used in ArkTS widgets since API version 9. 119 120**System capability**: SystemCapability.ArkUI.ArkUI.Full 121 122**Parameters** 123 124| Name | Type | Mandatory | Description | 125| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 126| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Background color of the progress indicator.<br>Default value:<br>- Capsule:<br> API version 9 or earlier: **'\#19182431'**<br> API version 10 or later: **'\#33ffffff'**<br>- Ring:<br> API version 9 or earlier: **'\#19182431'**<br> API version 10: **'\#08182431'**<br> API version 11 or later: **'\#0c182431'**<br>- Other styles: **'\#19182431'** | 127 128### style<sup>8+</sup> 129 130style(value: ProgressStyleOptions \| CapsuleStyleOptions \| RingStyleOptions \| LinearStyleOptions \| ScaleRingStyleOptions \| EclipseStyleOptions) 131 132Sets the component style. 133 134**Widget capability**: This API can be used in ArkTS widgets since API version 9. 135 136**Atomic service API**: This API can be used in atomic services since API version 11. 137 138**System capability**: SystemCapability.ArkUI.ArkUI.Full 139 140**Parameters** 141 142| Name | Type | Mandatory | Description | 143| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 144| 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. | 145 146### contentModifier<sup>12+</sup> 147contentModifier(modifier:ContentModifier\<ProgressConfiguration\>) 148 149Creates a content modifier. 150 151**System capability**: SystemCapability.ArkUI.ArkUI.Full 152 153**Parameters** 154| Name | Type | Mandatory | Description | 155| ------ | ------ | ---- | ------------ | 156| 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. | 157 158### privacySensitive<sup>12+</sup> 159 160privacySensitive(isPrivacySensitiveMode: Optional\<boolean\>) 161 162Sets whether to enable privacy mode. 163 164**System capability**: SystemCapability.ArkUI.ArkUI.Full 165 166**Parameters** 167 168| Name | Type | Mandatory | Description | 169| ------ | --------------------------------------------------------- | ---- | ----------------------------------------------------- | 170| 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) | 171 172## ProgressConfiguration<sup>12+</sup> 173| Name | Type | Description | 174| ------ | ------ | ------------| 175| value | number | Current progress. | 176| total | number | Total progress. | 177## ProgressStyleOptions<sup>8+</sup> 178 179**Atomic service API**: This API can be used in atomic services since API version 11. 180 181| Name | Type | Mandatory | Description | 182| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | 183| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.<br>Default value: **4.0vp** | 184| scaleCount | number | No | Number of divisions on the ring-style process indicator.<br>Default value: **120** | 185| 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** | 186| enableSmoothEffect<sup>10+</sup> | 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** | 187 188## CapsuleStyleOptions<sup>10+</sup> 189 190**Atomic service API**: This API can be used in atomic services since API version 11. 191 192| Name | Type | Mandatory | Description | 193| ------------- | ------- | ---- | -------- | 194| borderColor | [ResourceColor](ts-types.md#resourcecolor) | No | Border color.<br>Default value:<br>API version 10: **'\#33006cde'**<br>API version 11 or later: **'\#33007dff'** | 195| borderWidth | [Length](ts-types.md#length) | No | Border width. It cannot be set in percentage.<br>Default value: **1vp** | 196| content | string | No | Text content, which can be customized . | 197| 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.| 198| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color.<br>Default value: **'\#ff182431'** | 199| enableScanEffect | boolean | No | Whether to enable the scan effect.<br>Default value: **false** | 200| 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** | 201| 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** | 202 203## RingStyleOptions<sup>10+</sup> 204 205**Atomic service API**: This API can be used in atomic services since API version 11. 206 207| Name | Type | Mandatory | Description | 208| ------------- | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | 209| 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** | 210| shadow | boolean | No | Whether to enable the shadow effect.<br>Default value: **false** | 211| 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** | 212| enableScanEffect | boolean | No | Whether to enable the scan effect.<br>Default value: **false** | 213| 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** | 214 215## LinearStyleOptions<sup>10+</sup> 216 217**Atomic service API**: This API can be used in atomic services since API version 11. 218 219| Name | Type | Mandatory | Description | 220| ------------- | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | 221| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.<br>Default value: **4.0vp** | 222| 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** | 223| enableScanEffect | boolean | No | Whether to enable the scan effect.<br>Default value: **false** | 224| 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** | 225 226## ScaleRingStyleOptions<sup>10+</sup> 227 228**Atomic service API**: This API can be used in atomic services since API version 11. 229 230| Name | Type | Mandatory | Description | 231| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | 232| strokeWidth | [Length](ts-types.md#length) | No | Stroke width of the progress indicator. It cannot be set in percentage.<br>Default value: **4.0vp** | 233| scaleCount | number | No | Number of divisions on the ring-style process indicator.<br>Default value: **120** | 234| 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** | 235| 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** | 236 237## EclipseStyleOptions<sup>10+</sup> 238 239**Atomic service API**: This API can be used in atomic services since API version 11. 240 241| Name | Type | Mandatory | Description | 242| ------------ | ---------------------------- | ---- | ------------------------------------------------------------------------------------------ | 243| 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** | 244 245## ProgressStatus<sup>10+</sup> 246 247**Atomic service API**: This API can be used in atomic services since API version 11. 248 249| Name | Description | 250| ----------------------- | ---------------- | 251| LOADING | Loading. | 252| PROGRESSING | The progress is being updated. | 253 254## Events 255 256The [universal events](ts-universal-events-click.md) are supported. 257 258## Example 259 260### Example 1 261 262This example shows the effect of the basic attributes for different types of progress indicators. 263 264```ts 265// xxx.ets 266@Entry 267@Component 268struct ProgressExample { 269 build() { 270 Column({ space: 15 }) { 271 Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 272 Progress({ value: 10, type: ProgressType.Linear }).width(200) 273 Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200) 274 275 276 Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 277 Row({ space: 40 }) { 278 Progress({ value: 10, type: ProgressType.Eclipse }).width(100) 279 Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100) 280 } 281 282 Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 283 Row({ space: 40 }) { 284 Progress({ value: 10, type: ProgressType.ScaleRing }).width(100) 285 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 286 .color(Color.Grey).value(50).width(100) 287 .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 }) 288 } 289 290 // scaleCount vs. scaleWidth 291 Row({ space: 40 }) { 292 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 293 .color(Color.Grey).value(50).width(100) 294 .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 }) 295 Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }) 296 .color(Color.Grey).value(50).width(100) 297 .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 }) 298 } 299 300 Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 301 Row({ space: 40 }) { 302 Progress({ value: 10, type: ProgressType.Ring }).width(100) 303 Progress({ value: 20, total: 150, type: ProgressType.Ring }) 304 .color(Color.Grey).value(50).width(100) 305 .style({ strokeWidth: 20 }) 306 } 307 308 Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%') 309 Row({ space: 40 }) { 310 Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50) 311 Progress({ value: 20, total: 150, type: ProgressType.Capsule }) 312 .color(Color.Grey) 313 .value(50) 314 .width(100) 315 .height(50) 316 } 317 }.width('100%').margin({ top: 30 }) 318 } 319} 320``` 321 322 323 324### Example 2 325 326This example shows the effect of visual attributes of the ring style progress indicator. 327 328```ts 329// xxx.ets 330@Entry 331@Component 332struct ProgressExample { 333 private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 }, 334 { color: Color.Orange, offset: 1.0 }]) 335 build() { 336 Column({ space: 15 }) { 337 Text('Gradient Color').fontSize(9).fontColor(0xCCCCCC).width('90%') 338 Progress({ value: 70, total: 100, type: ProgressType.Ring }) 339 .width(100).style({ strokeWidth: 20 }) 340 .color(this.gradientColor) 341 342 Text('Shadow').fontSize(9).fontColor(0xCCCCCC).width('90%') 343 Progress({ value: 70, total: 100, type: ProgressType.Ring }) 344 .width(120).color(Color.Orange) 345 .style({ strokeWidth: 20, shadow: true }) 346 }.width('100%').padding({ top: 5 }) 347 } 348} 349``` 350 351 352### Example 3 353 354This example shows the animation effect of the ring style progress indicator. 355 356```ts 357// xxx.ets 358@Entry 359@Component 360struct ProgressExample { 361 private gradientColor: LinearGradient = new LinearGradient([{ color: Color.Yellow, offset: 0.5 }, 362 { color: Color.Orange, offset: 1.0 }]) 363 build() { 364 Column({ space: 15 }) { 365 Text('Loading Effect').fontSize(9).fontColor(0xCCCCCC).width('90%') 366 Progress({ value: 0, total: 100, type: ProgressType.Ring }) 367 .width(100).color(Color.Blue) 368 .style({ strokeWidth: 20, status: ProgressStatus.LOADING }) 369 370 Text('Scan Effect').fontSize(9).fontColor(0xCCCCCC).width('90%') 371 Progress({ value: 30, total: 100, type: ProgressType.Ring }) 372 .width(100).color(Color.Orange) 373 .style({ strokeWidth: 20, enableScanEffect: true }) 374 }.width('100%').padding({ top: 5 }) 375 } 376} 377``` 378 379 380### Example 4 381 382This example shows the effect of visual attributes of the capsule style progress indicator. 383 384```ts 385// xxx.ets 386@Entry 387@Component 388struct ProgressExample { 389 390 build() { 391 Column({ space: 15 }) { 392 Row({ space: 40 }) { 393 Progress({ value: 100, total: 100,type: ProgressType.Capsule }).width(100).height(50) 394 .style({borderColor: Color.Blue, borderWidth: 1, content: 'Installing...', 395 font: {size: 13, style: FontStyle.Normal}, fontColor: Color.Gray, 396 enableScanEffect: false, showDefaultPercentage: false}) 397 } 398 }.width('100%').padding({ top: 5 }) 399 } 400} 401``` 402 403 404### Example 5 405 406This example shows the smooth effect. 407 408```ts 409// xxx.ets 410@Entry 411@Component 412struct Index { 413 @State value: number = 0 414 415 build() { 416 Column({space: 10}) { 417 Text('enableSmoothEffect: true').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5) 418 .margin({top: 20}) 419 Progress({value: this.value, total: 100, type:ProgressType.Linear}) 420 .style({strokeWidth: 10, enableSmoothEffect: true}) 421 422 Text('enableSmoothEffect: false').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(5) 423 Progress({value: this.value, total: 100, type:ProgressType.Linear}) 424 .style({strokeWidth: 10, enableSmoothEffect: false}) 425 426 Button('value +10').onClick(() => { 427 this.value += 10 428 }) 429 .width(75) 430 .height(15) 431 .fontSize(9) 432 } 433 .width('50%') 434 .height('100%') 435 .margin({left:20}) 436 } 437} 438 439``` 440 441 442### Example 6 443 444This 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. 445 446```ts 447// xxx.ets 448class MyProgressModifier implements ContentModifier<ProgressConfiguration> { 449 color: Color = Color.White 450 451 452 constructor(color:Color) { 453 this.color = color 454 } 455 applyContent() : WrappedBuilder<[ProgressConfiguration]> 456 { 457 return wrapBuilder(myProgress) 458 } 459} 460 461@Builder function myProgress(config: ProgressConfiguration ) { 462 463 Column({space:30}) { 464 Text("Current progress: " + config.value + "/" + config.total).fontSize(20) 465 Row() { 466 Flex({ justifyContent: FlexAlign.SpaceBetween }) { 467 Path() 468 .width('30%') 469 .height('30%') 470 .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') 471 .fill(config.enabled && config.value >=1 ? (config.contentModifier as MyProgressModifier).color : Color.White) 472 .stroke(Color.Black) 473 .strokeWidth(3) 474 Path() 475 .width('30%') 476 .height('30%') 477 .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') 478 .fill(config.enabled && config.value >=2 ? (config.contentModifier as MyProgressModifier).color : Color.White) 479 .stroke(Color.Black) 480 .strokeWidth(3) 481 Path() 482 .width('30%') 483 .height('30%') 484 .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') 485 .fill(config.enabled && config.value >=3 ? (config.contentModifier as MyProgressModifier).color : Color.White) 486 .stroke(Color.Black) 487 .strokeWidth(3) 488 }.width('100%') 489 } 490 }.margin({bottom:100}) 491} 492 493@Entry 494@Component 495struct Index { 496 @State currentValue: number = 0 497 modifier = new MyProgressModifier(Color.Red) 498 @State myModifier:(MyProgressModifier | undefined) = this.modifier 499 build() { 500 Column() { 501 Progress({ value: this.currentValue, total: 3, type: ProgressType.Ring}).contentModifier(this.modifier) 502 Button('Progress++').onClick(()=>{ 503 if (this.currentValue < 3) { 504 this.currentValue += 1 505 } 506 }).width('30%') 507 Button('addProgress--').onClick(()=>{ 508 if (this.currentValue > 0) { 509 this.currentValue -= 1 510 } 511 }).width('30%') 512 }.width('100%').height('100%') 513 } 514} 515 516``` 517 518 519### Example 7 520 521This example shows how to enable privacy mode, which requires widget framework support. 522 523```ts 524@Entry 525@Component 526struct ProgressExample { 527 build() { 528 Scroll() { 529 Column({ space: 15 }) { 530 Row() { 531 Progress({ value: 50, total: 100, type: ProgressType.Capsule }).width(100).height(50) 532 .style({ 533 borderColor: Color.Blue, 534 borderWidth: 1, 535 content: 'Installing...', 536 font: { size: 13, style: FontStyle.Normal }, 537 fontColor: Color.Gray, 538 enableScanEffect: false, 539 showDefaultPercentage: true 540 }) 541 .privacySensitive(true) 542 } 543 } 544 } 545 } 546} 547``` 548 549
