diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md index 9310f9df68a9a7a7157bf0ebe736c2e458b65efb..adf16ff0603a9e433a871ef8d24f80bbb7df5605 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-progress.md @@ -1,12 +1,10 @@ # Progress +The **\** component is used to provide a progress bar that displays the progress of content loading or an operation. -> **NOTE** +> **NOTE** > -> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. - - -The **\** component is used to provide a progress bar that displays the progress of content loading or an operation. +> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Required Permissions @@ -26,35 +24,34 @@ Progress(value: {value: number, total?: number, type?: ProgressType}) Creates a progress bar. - Parameters - | Name | Type | Mandatory | Default Value | Description | + | Name| Type| Mandatory| Default Value| Description| | -------- | -------- | -------- | -------- | -------- | - | value | number | Yes | - | Current progress. | - | total | number | No | 100 | Total progress. | - | type | ProgressType | No | ProgressType.Linear | Type of the progress bar. | + | value | number | Yes| - | Current progress.| + | total | number | No| 100 | Total progress.| + | type | ProgressType | No| ProgressType.Linear | Type of the progress bar.| -- ProgressType enums - | Name | Description | +- ProgressType + | Name| Description| | -------- | -------- | - | Linear | Linear type. | - | Ring8+ | Ring type without scale. The ring fills up as the progress increases. | - | Eclipse | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full. | - | ScaleRing8+ | Ring type with scale, which is similar to the clock scale style. | - | Capsule8+ | Capsule type. At both ends, the progress bar changes from an arc to a straight line and from a straight line to an arc. In the middle part of the capsule, the progress bar moves to the right. | + | Linear8+ | Linear type.| + | Ring8+ | Ring type without scale. The ring fills up as the progress increases.| + | Eclipse8+ | Eclipse type, which visualizes the progress in a way similar to the moon waxing from new to full.| + | ScaleRing8+ | Ring type with scale, which is similar to the clock scale.| + | Capsule8+ | Capsule type. At both ends, the progress bar changes from an arc to a straight line and from a straight line to an arc. In the middle part of the capsule, the progress bar moves to the right.| ## Attributes -| Name | Type | Default Value | Description | +| Name| Type| Default Value| Description| | -------- | -------- | -------- | -------- | -| value | number | - | Current progress. | -| color | Color | - | Background color of the progress bar. | -| style8+ | {
strokeWidth? : Length,
scaleCount? : number,
scaleWidth? : Length
} | - | Component style.
- **strokeWidth**: width of the progress bar.
- **scaleCount**: scale count of the circular progress bar.
- **scaleWidth**: scale width of the circular progress bar.
If the scale thickness is greater than the progress bar width, the default scale thickness is used. | +| value | number | - | Current progress.| +| color | [ResourceColor](../../ui/ts-types.md) | - | Background color of the progress bar.| +| style8+ | {
strokeWidth?: Length,
scaleCount?: number,
scaleWidth?: Length
} | - | Component style.
**strokeWidth**: width of the progress bar.
**scaleCount**: scale count of the circular progress bar.
**scaleWidth**: scale width of the circular progress bar.
If the scale width is greater than the width of the progress bar, the default scale width is used.| ## Example - ```ts // xxx.ets @Entry