The Progress component is used to provide an indicator that shows the progress of an operation. For details, see Progress.
Creating a Progress Indicator
Progress is created by calling an API. The API call method is as follows:
Progress(options: {value: number, total?: number, type?: ProgressType}) In the API, value is used to set the current progress value, total is used to set the total progress length, and type is used to set the Progress style.
Progress({ value: 24, total: 100, type: ProgressType.Linear }) // Create a linear progress indicator with a total progress of 100 and a current progress value of 24. 
Setting the Progress Indicator Style
Progress provides five types. You can set the progress indicator style through ProgressType. The ProgressType types include: ProgressType.Linear (linear style), ProgressType.Ring (ring style without scale), ProgressType.ScaleRing (ring style with scale), ProgressType.Eclipse (circular style), and ProgressType.Capsule (capsule style).
-
Linear style progress indicator (default type)
Since API version 9, when the component height is greater than its width, the progress indicator is displayed vertically in an adaptive manner. When the component height equals its width, it remains displayed horizontally.
Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(200).height(50) Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(50).height(200)
-
Ring-style progress indicator without scale marks
// From left to right, ring progress indicator No. 1: the default foreground color is a blue gradient, and the default strokeWidth is 4.0 vp. Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100) // From left to right, ring progress indicator No. 2. Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100) .color(Color.Grey) // The progress indicator foreground color is gray. .style({ strokeWidth: 15}) // Set the strokeWidth progress indicator width to 15vp.
-
Ring-style progress indicator with scale marks
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100) .backgroundColor(Color.Black) .style({ scaleCount: 20, scaleWidth: 5 }) // Set the total scale count of the ring-style progress indicator with scale marks to 20 and the scale width to 5 vp. Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100) .backgroundColor(Color.Black) .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 5 }) // Set the scale ring progress indicator width to 15 vp, the total scale count to 20, and the scale width to 5 vp. Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100) .backgroundColor(Color.Black) .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 3 }) // Set the scale ring progress indicator width to 15 vp, the total scale count to 20, and the scale width to 3 vp.
-
Circular-style progress indicator
// From left to right, circular progress indicator No. 1, with the default foreground color blue. Progress({ value: 10, total: 150, type: ProgressType.Eclipse }).width(100).height(100) // From left to right, circular-style progress indicator No. 2, with the foreground color set to gray. Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).width(100).height(100)
-
Capsule style progress indicator
-
The progress display at the rounded ends is consistent with the ProgressType.Eclipse style.
-
The progress display in the middle section is a rectangular indicator, similar to the ProgressType.Linear style.
-
When the component height is greater than the width, it automatically adapts to vertical display.
Progress({ value: 10, total: 150, type: ProgressType.Capsule }).width(100).height(50) Progress({ value: 20, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Grey) Progress({ value: 50, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Blue).backgroundColor(Color.Black)
-
Example
To update the current progress value, for example, in an app installation progress indicator, you can tap the Button to increase progressValue. The value attribute assigns progressValue to the Progress component, which then triggers a refresh and updates the current progress.
@Entry
@Component
struct ProgressCase1 {
@State progressValue: number = 0; // Set the initial value of the progress indicator to 0.
build() {
Column() {
Column() {
Progress({value:this.progressValue, total:100, type:ProgressType.Capsule}).width(200).height(50)
Row().width('100%').height(5)
// Replace $r('app.string.progress_add') with the actual resource file. In this sample, the value of the resource file is "progress indicator+5".
Button($r('app.string.progress_add'))
.onClick(()=>{
this.progressValue += 5;
if (this.progressValue > 100){
this.progressValue = 0;
}
})
}
}.width('100%').height('100%')
}
} 