1# LoadingProgress 2 3The **LoadingProgress** component is used to create a loading progress animation. 4 5The loading progress 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-component-general-attributes.md), the following attributes are supported. 32 33> **NOTE** 34> 35> Set the component's width and height to reasonable values. If they are too large, the loading animation might not work as expected. 36 37### color 38 39color(value: ResourceColor) 40 41Sets the foreground color for the **LoadingProgress** component. 42 43**Widget capability**: This API can be used in ArkTS widgets since API version 9. 44 45**Atomic service API**: This API can be used in atomic services since API version 11. 46 47**System capability**: SystemCapability.ArkUI.ArkUI.Full 48 49**Parameters** 50 51| Name| Type | Mandatory| Description | 52| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 53| 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'**| 54 55### enableLoading<sup>10+</sup> 56 57enableLoading(value: boolean) 58 59Sets 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. 60 61 62**Atomic service API**: This API can be used in atomic services since API version 11. 63 64**System capability**: SystemCapability.ArkUI.ArkUI.Full 65 66**Parameters** 67 68| Name| Type | Mandatory| Description | 69| ------ | ------- | ---- | ---------------------------------------------- | 70| value | boolean | Yes | Whether to show the loading animation.<br>Default value: **true**<br>**true**: Show the loading animation.<br>**false**: Do not show the loading animation.| 71 72### contentModifier<sup>12+</sup> 73 74contentModifier(modifier: ContentModifier\<LoadingProgressConfiguration>) 75 76Creates a content modifier. 77 78**Atomic service API**: This API can be used in atomic services since API version 12. 79 80**System capability**: SystemCapability.ArkUI.ArkUI.Full 81 82**Parameters** 83 84| Name| Type | Mandatory| Description | 85| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 86| 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.| 87 88## Events 89 90The [universal events](ts-component-general-events.md) are supported. 91 92## LoadingProgressConfiguration<sup>12+</sup> 93 94You need a custom class to implement the **ContentModifier** API. 95 96**Atomic service API**: This API can be used in atomic services since API version 12. 97 98**System capability**: SystemCapability.ArkUI.ArkUI.Full 99 100| Name | Type | Read Only | Optional | Description | 101| ------ | ------ | ------ |-------------------------------- |-------------------------------- | 102| enableLoading | boolean | No| No|Whether to show the loading animation.<br>Default value: **true**<br>**true**: Show the loading animation.<br>**false**: Do not show the loading animation.| 103 104## LoadingProgressStyle<sup>(deprecated)</sup> 105 106This API is deprecated since API version 8. 107 108**Widget capability**: This API can be used in ArkTS widgets since API version 9. 109 110**Atomic service API**: This API can be used in atomic services since API version 11. 111 112**System capability**: SystemCapability.ArkUI.ArkUI.Full 113 114| Name | Description | 115| ---------------------- | ---------------------------------------- | 116| Default | Default loading style. Setting this value is not supported since API version 8. | 117| Circular | Circular loading style. Setting this value is not supported since API version 8. | 118| Orbital | Comet-shaped loading style. This is the default style since API version 8. | 119 120## Example 121 122### Example 1 : Setting the Color of the Loading Progress Animation 123 124This example demonstrates how to set the color of the loading progress animation using the **color** attribute. 125 126```ts 127// xxx.ets 128@Entry 129@Component 130struct LoadingProgressExample { 131 build() { 132 Column({ space: 5 }) { 133 Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%') 134 LoadingProgress() 135 .color(Color.Blue) 136 .layoutWeight(1) 137 }.width('100%').margin({ top: 5 }) 138 } 139} 140``` 141 142 143 144### Example 2: Setting the Custom Content Area 145 146This example demonstrates how to customize the content area using the **contentModifier** API and how to toggle the display of the **LoadingProgress** component using the **enableLoading** API. 147 148```ts 149// xxx.ets 150import { promptAction } from '@kit.ArkUI' 151 152class MyLoadingProgressStyle implements ContentModifier<LoadingProgressConfiguration> { 153 enableLoading: boolean = false 154 155 constructor(enableLoading: boolean) { 156 this.enableLoading = enableLoading 157 } 158 159 applyContent(): WrappedBuilder<[LoadingProgressConfiguration]> { 160 return wrapBuilder(buildLoadingProgress) 161 } 162} 163 164let arr1: string[] = 165 ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"] 166let arr2: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"] 167 168@Builder 169function buildLoadingProgress(config: LoadingProgressConfiguration) { 170 Column({ space: 8 }) { 171 Row() { 172 Column() { 173 Circle({ 174 width: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? 100 : 80, 175 height: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? 100 : 80 176 }) 177 .fill(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3) 178 }.width('50%') 179 180 Column() { 181 Button('' + ((config.contentModifier as MyLoadingProgressStyle).enableLoading)) 182 .onClick((event: ClickEvent) => { 183 promptAction.showToast({ 184 message: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) + '' 185 }) 186 }) 187 .fontColor(Color.White) 188 .backgroundColor(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3) 189 }.width('50%') 190 191 } 192 193 Row() { 194 Column() { 195 Gauge({ 196 value: (config.contentModifier as MyLoadingProgressStyle).enableLoading ? 50 : 30, min: 11, max: 100 197 }) { 198 Column() { 199 Text('60') 200 .maxFontSize("180sp") 201 .minFontSize("160.0vp") 202 .fontWeight(FontWeight.Medium) 203 .fontColor("#ff182431") 204 .width('40%') 205 .height('30%') 206 .textAlign(TextAlign.Center) 207 .margin({ top: '22.2%' }) 208 .textOverflow({ overflow: TextOverflow.Ellipsis }) 209 .maxLines(1) 210 }.width('100%').height('100%') 211 } 212 .colors(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3) 213 .width(200) 214 .strokeWidth(18) 215 .padding(5) 216 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 217 .height(200) 218 }.width('100%') 219 220 } 221 222 Column() { 223 List({ space: 20, initialIndex: 0 }) { 224 ForEach(arr2, (item: string) => { 225 ListItem() { 226 Text((config.contentModifier as MyLoadingProgressStyle).enableLoading ? '' + item : Number(item) * 2 + '') 227 .width('100%') 228 .height('100%') 229 .fontColor((config.contentModifier as MyLoadingProgressStyle).enableLoading ? Color.White : Color.Orange) 230 .fontSize((config.contentModifier as MyLoadingProgressStyle).enableLoading ? 16 : 20) 231 .textAlign(TextAlign.Center) 232 .backgroundColor((config.contentModifier as MyLoadingProgressStyle).enableLoading ? Color.Grey : 0x2577e3) 233 } 234 .height(110) 235 .border({ 236 width: 2, 237 color: Color.White 238 }) 239 }, (item: string) => item) 240 } 241 .height(200) 242 .width('100%') 243 .friction(0.6) 244 245 .lanes({ 246 minLength: (config.contentModifier as MyLoadingProgressStyle).enableLoading ? 40 : 80, 247 maxLength: (config.contentModifier as MyLoadingProgressStyle).enableLoading ? 40 : 80 248 }) 249 .scrollBar(BarState.Off) 250 } 251 252 }.width("100%").padding(10) 253} 254 255 256@Entry 257@Component 258struct LoadingProgressDemoExample { 259 @State loadingProgressList: (boolean | undefined | null)[] = [undefined, true, null, false] 260 @State widthList: (number | string)[] = ['110%', 220, '40%', 80] 261 @State loadingProgressIndex: number = 0 262 @State clickFlag: number = 0 263 scroller: Scroller = new Scroller() 264 265 build() { 266 Column() { 267 Scroll(this.scroller) { 268 Column({ space: 5 }) { 269 Column() { 270 LoadingProgress() 271 .color('#106836') 272 .size({ width: '100%' }) 273 .contentModifier(new MyLoadingProgressStyle(this.loadingProgressList[this.loadingProgressIndex])) 274 }.width('100%').backgroundColor(0xdcdcdc) 275 }.width('100%').margin({ top: 5 }) 276 }.height('85%') 277 278 Button('Switch config.enableloading').onClick(() => { 279 this.clickFlag++ 280 this.loadingProgressIndex = (this.loadingProgressIndex + 1) % this.loadingProgressList.length 281 console.log('enableLoading:' + this.loadingProgressList[this.loadingProgressIndex]) 282 }).margin(20) 283 } 284 285 } 286} 287``` 288 289
