1# ProgressButton
2
3
4The download button with progress indicator is a component that shows the download progress.
5
6
7> **NOTE**
8>
9> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
10
11
12## Modules to Import
13
14```
15import { ProgressButton } from '@kit.ArkUI'
16```
17
18## Attributes
19The [universal attributes](ts-universal-attributes-size.md) are supported.
20
21## ProgressButton
22
23ProgressButton({progress: number, content: string, progressButtonWidth?: Length, clickCallback: () => void, enable: boolean})
24
25**Decorator**: @Component
26
27**Atomic service API**: This API can be used in atomic services since API version 11.
28
29**System capability**: SystemCapability.ArkUI.ArkUI.Full
30
31**Parameters**
32
33| Name| Type| Mandatory| Decorator| Description|
34| -------- | -------- | -------- | -------- | -------- |
35| progress | number | Yes| \@Prop | Current download progress.|
36| content | string | Yes| \@Prop | Button text.|
37| progressButtonWidth | [Length](ts-types.md#length) | No| - | Width of the button.<br>Default value: **44**|
38| clickCallback | () =&gt; void | Yes| - | Callback invoked when the button is clicked.|
39| enable | boolean | Yes| \@Prop | Whether the button can be clicked.<br> **true**: The button can be clicked.<br> **false**: The button cannot be clicked.|
40
41## Events
42The [universal events](ts-universal-events-click.md) are supported.
43
44## Example
45
46```ts
47import { ProgressButton } from '@kit.ArkUI'
48
49@Entry
50@Component
51struct Index {
52  @State halfProgress: number = 0
53  @State smallProgress: number = 0
54  @State bigProgress: number = 0
55  @State textState1: string = ''
56  @State isRunning1: boolean = false
57  @State enableState1: boolean = true
58  @State progressState: Visibility = Visibility.None
59  @State ButtonState: Visibility = Visibility.Visible
60  @State buttonText: string = 'Download'
61  @State buttonEnable: boolean = true
62  @State isEnd: boolean = false
63  build() {
64    Column({space: 20}) {
65      Text('Download button with progress indicator')
66      Button(this.buttonText)
67        .fontSize($r('sys.float.ohos_id_text_size_button3'))
68        .fontWeight(FontWeight.Medium)
69        .fontColor($r('sys.color.ohos_id_color_emphasize'))
70        .padding({left: 8, right: 8})
71        .opacity(this.buttonEnable? 1: 0.4)
72        .enabled(this.buttonEnable)
73        .height(28)
74        .borderRadius(14)
75        .width(60)
76        .backgroundColor($r("sys.color.ohos_id_color_button_normal"))
77        .onClick(() => {
78          if(!this.isEnd) {
79            this.buttonText = 'Pending'
80            let timer1 = setInterval(() => {
81              this.progressState = Visibility.Visible
82              this.ButtonState = Visibility.None
83              clearInterval(timer1)
84              this.isRunning1 = true
85              let timer = setInterval(() => {
86                if (this.isRunning1) {
87                  if (this.halfProgress === 100) {
88                    this.isEnd = true
89                  } else {
90                    this.halfProgress++
91                    if (this.halfProgress === 100) {
92                      this.textState1 = 'Installing'
93                      this.enableState1 = false
94                      this.ButtonState = Visibility.Visible
95                      this.progressState = Visibility.None
96                      this.buttonEnable = false
97                      this.buttonText = 'Installing'
98                      let timer2 = setInterval(() => {
99                        this.buttonText = 'Open'
100                        this.buttonEnable = true
101                        this.isEnd = true
102                        clearInterval(timer2)
103                      }, 2000)
104                    }
105                    console.info('x progress++ = ' + this.halfProgress)
106                  }
107                } else {
108                  console.info('x isRunning = ' + false)
109                  clearInterval(timer)
110                }
111              }, 100)
112            }, 2000)
113          }
114        }).visibility(this.ButtonState)
115      ProgressButton({
116        progress: this.halfProgress,
117        progressButtonWidth: "60",
118        content: this.textState1,
119        enable: this.enableState1,
120
121        clickCallback: () => {
122          if (this.isRunning1 && this.halfProgress < 100) {
123            this.textState1 = 'Continue'
124          }
125          this.isRunning1 = !this.isRunning1
126          let timer = setInterval(() => {
127
128            if (this.isRunning1) {
129              if (this.halfProgress === 100) {
130              } else {
131                this.halfProgress++
132                if (this.halfProgress === 100) {
133                  this.textState1 = 'Installing'
134                  this.enableState1 = false
135                  this.ButtonState = Visibility.Visible
136                  this.progressState = Visibility.None
137                  this.buttonEnable = false
138                  this.buttonText = 'Installing'
139                  let timer2 = setInterval(() => {
140                    this.buttonText = 'Open'
141                    this.buttonEnable = true
142                    this.isEnd = true
143                    clearInterval(timer2)
144                  },2000)
145                }
146                console.info('x progress++ = ' + this.halfProgress)
147              }
148            } else {
149              console.info('x isRunning = ' + false)
150              clearInterval(timer)
151            }
152          }, 100)
153        }
154      }).visibility(this.progressState)
155    }.alignItems(HorizontalAlign.Center).width('100%')
156  }
157}
158```
159
160
161![en-us_image_0000001664713029](figures/en-us_image_0000001664713029.png)
162