1# LoadingProgress
2
3The **LoadingProgress** component is used to create a loading animation.
4
5The loading animation stops when the component is invisible. The component's visibility is determined by the value of **ratios** in the [onVisibleAreaChange](./ts-universal-component-visible-area-change-event.md#onvisibleareachange) event callback: If the value is greater than 0, the component is visible.
6
7>  **NOTE**
8>
9> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
10
11
12## Child Components
13
14Not supported
15
16
17## APIs
18
19LoadingProgress()
20
21Creates a **LoadingProgress** component.
22
23**Widget capability**: This API can be used in ArkTS widgets since API version 9.
24
25**Atomic service API**: This API can be used in atomic services since API version 11.
26
27**System capability**: SystemCapability.ArkUI.ArkUI.Full
28
29## Attributes
30
31In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
32
33### color
34
35color(value: ResourceColor)
36
37Sets the foreground color for the **LoadingProgress** component.
38
39**Widget capability**: This API can be used in ArkTS widgets since API version 9.
40
41**Atomic service API**: This API can be used in atomic services since API version 11.
42
43**System capability**: SystemCapability.ArkUI.ArkUI.Full
44
45**Parameters**
46
47| Name| Type                                      | Mandatory| Description                                                        |
48| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ |
49| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Foreground color of the **LoadingProgress** component.<br>Default value:<br>API version 10 or earlier: **'#99666666'**<br>API version 11 or later: **'#ff666666'**|
50
51### enableLoading<sup>10+</sup>
52
53enableLoading(value: boolean)
54
55Sets whether to show the loading animation. The component still takes up space in the layout when the loading animation is not shown. The universal attribute [Visibility.Hidden](ts-universal-attributes-visibility.md#visibility) hides the entire component area, including the borders and paddings. In contrast, **enableLoading=false** only hides the loading animation itself and does not affect the borders or other elements.
56
57
58**Atomic service API**: This API can be used in atomic services since API version 11.
59
60**System capability**: SystemCapability.ArkUI.ArkUI.Full
61
62**Parameters**
63
64| Name| Type   | Mandatory| Description                                          |
65| ------ | ------- | ---- | ---------------------------------------------- |
66| value  | boolean | Yes  | Whether to show the loading animation.<br>Default value: **true**|
67
68### contentModifier<sup>12+</sup>
69
70contentModifier(modifier: ContentModifier\<LoadingProgressConfiguration>)
71
72Creates a content modifier.
73
74**Atomic service API**: This API can be used in atomic services since API version 12.
75
76**System capability**: SystemCapability.ArkUI.ArkUI.Full
77
78**Parameters**
79
80| Name| Type                                         | Mandatory| Description                                            |
81| ------ | --------------------------------------------- | ---- | ------------------------------------------------ |
82| modifier  | [ContentModifier\<LoadingProgressConfiguration>](#loadingprogressconfiguration12)| Yes  | Content modifier to apply to the current component.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API.|
83
84## Events
85
86The [universal events](ts-universal-events-click.md) are supported.
87
88## LoadingProgressConfiguration<sup>12+</sup>
89
90You need a custom class to implement the **ContentModifier** API.
91
92**Atomic service API**: This API can be used in atomic services since API version 12.
93
94**System capability**: SystemCapability.ArkUI.ArkUI.Full
95
96| Name | Type   |    Read Only   |    Optional   |  Description             |
97| ------ | ------ | ------ |-------------------------------- |-------------------------------- |
98| enableLoading | boolean | No| No|Whether to show the loading animation.<br>Default value: **true**|
99
100## Example
101
102### Example 1
103
104```ts
105// xxx.ets
106@Entry
107@Component
108struct LoadingProgressExample {
109  build() {
110    Column({ space: 5 }) {
111      Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
112      LoadingProgress()
113        .color(Color.Blue)
114        .layoutWeight(1)
115    }.width('100%').margin({ top: 5 })
116  }
117}
118```
119
120![LoadingProgress](figures/LoadingProgress.gif)
121
122### Example 2
123
124```ts
125// This example implements a custom <LoadingProgress> component, enabling the component's visibility to be switched through a button. When the button is clicked, config.enableLoading is switched to false, and the component is not displayed.
126// xxx.ets
127import { hilog } from '@kit.PerformanceAnalysisKit'
128import { promptAction } from '@kit.ArkUI'
129
130class MyLoadingProgressStyle implements ContentModifier<LoadingProgressConfiguration> {
131  enableLoading: boolean = false
132
133  constructor(enableLoading: boolean) {
134    this.enableLoading = enableLoading
135  }
136
137  applyContent(): WrappedBuilder<[LoadingProgressConfiguration]> {
138    return wrapBuilder(buildLoadingProgress)
139  }
140}
141
142let arr1: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"]
143let arr2: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
144
145@Builder
146function buildLoadingProgress(config: LoadingProgressConfiguration) {
147  Column({ space: 8 }) {
148    Row() {
149      Column() {
150        Circle({
151          width: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? 100 : 80,
152          height: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? 100 : 80
153        })
154          .fill(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3)
155      }.width('50%')
156
157      Column() {
158        Button('' + ((config.contentModifier as MyLoadingProgressStyle).enableLoading))
159          .onClick((event: ClickEvent) => {
160            promptAction.showToast({
161              message: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) + ''
162            })
163          })
164          .fontColor(Color.White)
165          .backgroundColor(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3)
166      }.width('50%')
167
168    }
169
170    Row() {
171      Column() {
172        Gauge({
173          value: (config.contentModifier as MyLoadingProgressStyle).enableLoading?50:30, min: 11, max: 100
174        }) {
175          Column() {
176            Text('60')
177              .maxFontSize("180sp")
178              .minFontSize("160.0vp")
179              .fontWeight(FontWeight.Medium)
180              .fontColor("#ff182431")
181              .width('40%')
182              .height('30%')
183              .textAlign(TextAlign.Center)
184              .margin({ top: '22.2%' })
185              .textOverflow({ overflow: TextOverflow.Ellipsis })
186              .maxLines(1)
187          }.width('100%').height('100%')
188        }
189
190        .colors(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3)
191        .width(200)
192        .strokeWidth(18)
193        .padding(5)
194        .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 })
195        .height(200)
196      }.width('100%')
197
198    }
199
200    Column() {
201      List({ space: 20, initialIndex: 0 }) {
202        ForEach(arr2, (item: string) => {
203          ListItem() {
204            Text((config.contentModifier as MyLoadingProgressStyle).enableLoading ? '' + item : Number(item) * 2 + '')
205              .width('100%')
206              .height('100%')
207              .fontColor((config.contentModifier as MyLoadingProgressStyle).enableLoading ? Color.White : Color.Orange)
208              .fontSize((config.contentModifier as MyLoadingProgressStyle).enableLoading ? 16 : 20)
209              .textAlign(TextAlign.Center)
210              .backgroundColor((config.contentModifier as MyLoadingProgressStyle).enableLoading ? Color.Grey : 0x2577e3)
211          }
212          .height(110)
213          .border({
214            width: 2,
215            color: Color.White
216          })
217        }, (item: string) => item)
218      }
219      .height(200)
220      .width('100%')
221      .friction(0.6)
222
223      .lanes({ minLength: (config.contentModifier as MyLoadingProgressStyle).enableLoading?40:80, maxLength: (config.contentModifier as MyLoadingProgressStyle).enableLoading?40:80 })
224      .scrollBar(BarState.Off)
225    }
226
227  }.width("100%").padding(10)
228}
229
230
231@Entry
232@Component
233struct LoadingProgressDemoExample {
234  @State loadingProgressList: (boolean | undefined | null)[] = [undefined, true, null, false]
235  @State widthList: (number | string)[] = ['110%', 220, '40%', 80]
236  @State loadingProgressIndex: number = 0
237  @State clickFlag: number = 0
238  scroller: Scroller = new Scroller()
239
240  build() {
241    Column() {
242      Scroll(this.scroller) {
243        Column({ space: 5 }) {
244          Column() {
245            LoadingProgress()
246              .color('#106836')
247              .size({ width: '100%' })
248              .contentModifier(new MyLoadingProgressStyle(this.loadingProgressList[this.loadingProgressIndex]))
249          }.width('100%').backgroundColor(0xdcdcdc)
250        }.width('100%').margin({ top: 5 })
251      }.height('85%')
252
253      Button ('Switch config.enableloading').onClick () => {
254        this.clickFlag++
255        this.loadingProgressIndex = (this.loadingProgressIndex + 1) % this.loadingProgressList.length
256        console.log('enableLoading:' + this.loadingProgressList[this.loadingProgressIndex])
257      }).margin(20)
258    }
259
260  }
261}
262```
263![LoadingProgress_builder](figures/LoadingProgress_builder.gif)
264