• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Progress Indicator
2
3
4The **\<Progress>** component is used to provide a progress indicator that displays the progress of an operation. For details, see [Progress](../reference/arkui-ts/ts-basic-components-progress.md).
5
6
7## Creating a Progress Indicator
8
9You can create a progress indicator by calling the following API:
10
11
12
13```ts
14Progress(options: {value: number, total?: number, type?: ProgressType})
15```
16
17
18Creates a progress bar indicator. In this API, **value** indicates the initial progress, **total** indicates the total progress, and **type** indicates the style of the progress indicator.
19
20
21
22```ts
23Progress({ value: 24, total: 100, type: ProgressType.Linear }) // Create a linear progress indicator whose total progress is 100 and initial progress is 24.
24```
25
26
27![create](figures/create.png)
28
29
30## Setting the Progress Indicator Style
31
32Progress indicators come in five styles. When creating a progress indicator, you can specify its style by setting the **ProgressType** parameter to any of the following: **ProgressType.Linear** (linear style), **ProgressType.Ring** (indeterminate ring style), **ProgressType.ScaleRing** (determinate ring style), **ProgressType.Eclipse** (eclipse style), and **ProgressType.Capsule** (capsule style).
33
34
35- Linear style (default style)
36  >**NOTE**
37  >
38  > Since API version 9, the progress indicator adaptively switches to the vertical layout if the height is greater than the width and remains the horizontal layout if the height is equal to the width.
39
40
41  ```ts
42  Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(200).height(50)
43  Progress({ value: 20, total: 100, type: ProgressType.Linear }).width(50).height(200)
44  ```
45
46  ![en-us_image_0000001562700417](figures/en-us_image_0000001562700417.png)
47
48- Indeterminate ring style
49
50  ```ts
51  // The progress indicator in the indeterminate ring style on the left: Retain its default settings for the foreground color (blue) and stroke width (2.0 vp).
52  Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
53  // The right progress indicator in the indeterminate ring style on the right.
54  Progress({ value: 40, total: 150, type: ProgressType.Ring }).width(100).height(100)
55      .color(Color.Grey)	// Set the foreground color to gray.
56      .style({ strokeWidth: 15})	// Set the stroke width to 15.0 vp.
57  ```
58
59  ![progress_ring](figures/progress_ring.png)
60
61- Determinate ring style
62
63  ```ts
64  Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
65      .backgroundColor(Color.Black)
66      .style({ scaleCount: 20, scaleWidth: 5 })	// Set the total number of scales to 20 and the scale width to 5 vp.
67  Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
68      .backgroundColor(Color.Black)
69      .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 5 })	// Set the stroke width to 15, the total number of scales to 20, and the scale width to 5 vp.
70  Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
71      .backgroundColor(Color.Black)
72      .style({ strokeWidth: 15, scaleCount: 20, scaleWidth: 3 })	// Set the stroke width to 15, the total number of scales to 20, and the scale width to 3 vp.
73  ```
74
75  ![progress_scalering](figures/progress_scalering.png)
76
77- Eclipse style
78
79  ```ts
80  // The progress indicator in the eclipse style on the left: Retain its default settings for the foreground color (blue).
81  Progress({ value: 10, total: 150, type: ProgressType.Eclipse }).width(100).height(100)
82  // The progress indicator in the eclipse style on the right: Set its foreground color to gray.
83  Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).width(100).height(100)
84  ```
85
86  ![progress_circle](figures/progress_circle.png)
87
88- Capsule style
89  >**NOTE**
90  >
91  >-  At both ends, the progress indicator in the capsule style works in a same manner as that in the eclipse style.
92  >-  In the middle part of the capsule, the progress indicator works in a same manner as the linear style.
93  >
94  >-  If the height is greater than the width, the progress indicator adaptively switches to the vertical layout.
95
96
97  ```ts
98  Progress({ value: 10, total: 150, type: ProgressType.Capsule }).width(100).height(50)
99  Progress({ value: 20, total: 150, type: ProgressType.Capsule }).width(50).height(100).color(Color.Grey)
100  Progress({ value: 50, total: 150, type: ProgressType.Capsule }).width(50).height(100).backgroundColor(Color.Black)
101  ```
102
103  ![progress_captule](figures/progress_captule.png)
104
105
106## Example Scenario
107
108In this example, the progress of the **\<Progress>** component is updated by clicking the button. After the button is clicked, the value of **progressValue** is incremented and passed to the **\<Progress>** component, which is then updated accordingly.
109
110```ts
111@Entry
112@Component
113struct ProgressCase1 {
114  @State progressValue: number = 0	// Set the initial progress of the progress indicator to 0.
115  build() {
116    Column() {
117      Column() {
118        Progress({value:0, total:100, type:ProgressType.Capsule}).width(200).height(50)
119          .style({strokeWidth:50}).value(this.progressValue)
120        Row().width('100%').height(5)
121        Button ("Progress + 5")
122          .onClick(()=>{
123            this.progressValue += 5
124            if (this.progressValue > 100){
125              this.progressValue = 0
126            }
127          })
128      }
129    }.width('100%').height('100%')
130  }
131}
132```
133
134
135![progress](figures/progress.gif)
136