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-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## LoadingProgressStyle<sup>(deprecated)</sup> 101 102This API is deprecated since API version 8. 103 104**Widget capability**: This API can be used in ArkTS widgets since API version 9. 105 106**Atomic service API**: This API can be used in atomic services since API version 11. 107 108**System capability**: SystemCapability.ArkUI.ArkUI.Full 109 110| Name | Description | 111| ---------------------- | ---------------------------------------- | 112| Default | Default loading style. Setting this value is not supported since API version 8. | 113| Circular | Circular loading style. Setting this value is not supported since API version 8. | 114| Orbital | Comet-shaped loading style. This is the default style since API version 8. | 115 116## Example 117 118### Example 1 : Setting the Color of the Loading Progress Animation 119 120This example demonstrates how to set the color of the loading progress animation using the **color** attribute. 121 122```ts 123// xxx.ets 124@Entry 125@Component 126struct LoadingProgressExample { 127 build() { 128 Column({ space: 5 }) { 129 Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%') 130 LoadingProgress() 131 .color(Color.Blue) 132 .layoutWeight(1) 133 }.width('100%').margin({ top: 5 }) 134 } 135} 136``` 137 138 139 140### Example 2: Setting the Custom Content Area 141 142This 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. 143 144```ts 145// xxx.ets 146import { promptAction } from '@kit.ArkUI' 147 148class MyLoadingProgressStyle implements ContentModifier<LoadingProgressConfiguration> { 149 enableLoading: boolean = false 150 151 constructor(enableLoading: boolean) { 152 this.enableLoading = enableLoading 153 } 154 155 applyContent(): WrappedBuilder<[LoadingProgressConfiguration]> { 156 return wrapBuilder(buildLoadingProgress) 157 } 158} 159 160let arr1: string[] = 161 ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"] 162let arr2: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"] 163 164@Builder 165function buildLoadingProgress(config: LoadingProgressConfiguration) { 166 Column({ space: 8 }) { 167 Row() { 168 Column() { 169 Circle({ 170 width: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? 100 : 80, 171 height: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? 100 : 80 172 }) 173 .fill(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3) 174 }.width('50%') 175 176 Column() { 177 Button('' + ((config.contentModifier as MyLoadingProgressStyle).enableLoading)) 178 .onClick((event: ClickEvent) => { 179 promptAction.showToast({ 180 message: ((config.contentModifier as MyLoadingProgressStyle).enableLoading) + '' 181 }) 182 }) 183 .fontColor(Color.White) 184 .backgroundColor(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3) 185 }.width('50%') 186 187 } 188 189 Row() { 190 Column() { 191 Gauge({ 192 value: (config.contentModifier as MyLoadingProgressStyle).enableLoading ? 50 : 30, min: 11, max: 100 193 }) { 194 Column() { 195 Text('60') 196 .maxFontSize("180sp") 197 .minFontSize("160.0vp") 198 .fontWeight(FontWeight.Medium) 199 .fontColor("#ff182431") 200 .width('40%') 201 .height('30%') 202 .textAlign(TextAlign.Center) 203 .margin({ top: '22.2%' }) 204 .textOverflow({ overflow: TextOverflow.Ellipsis }) 205 .maxLines(1) 206 }.width('100%').height('100%') 207 } 208 .colors(((config.contentModifier as MyLoadingProgressStyle).enableLoading) ? Color.Grey : 0x2577e3) 209 .width(200) 210 .strokeWidth(18) 211 .padding(5) 212 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 213 .height(200) 214 }.width('100%') 215 216 } 217 218 Column() { 219 List({ space: 20, initialIndex: 0 }) { 220 ForEach(arr2, (item: string) => { 221 ListItem() { 222 Text((config.contentModifier as MyLoadingProgressStyle).enableLoading ? '' + item : Number(item) * 2 + '') 223 .width('100%') 224 .height('100%') 225 .fontColor((config.contentModifier as MyLoadingProgressStyle).enableLoading ? Color.White : Color.Orange) 226 .fontSize((config.contentModifier as MyLoadingProgressStyle).enableLoading ? 16 : 20) 227 .textAlign(TextAlign.Center) 228 .backgroundColor((config.contentModifier as MyLoadingProgressStyle).enableLoading ? Color.Grey : 0x2577e3) 229 } 230 .height(110) 231 .border({ 232 width: 2, 233 color: Color.White 234 }) 235 }, (item: string) => item) 236 } 237 .height(200) 238 .width('100%') 239 .friction(0.6) 240 241 .lanes({ 242 minLength: (config.contentModifier as MyLoadingProgressStyle).enableLoading ? 40 : 80, 243 maxLength: (config.contentModifier as MyLoadingProgressStyle).enableLoading ? 40 : 80 244 }) 245 .scrollBar(BarState.Off) 246 } 247 248 }.width("100%").padding(10) 249} 250 251 252@Entry 253@Component 254struct LoadingProgressDemoExample { 255 @State loadingProgressList: (boolean | undefined | null)[] = [undefined, true, null, false] 256 @State widthList: (number | string)[] = ['110%', 220, '40%', 80] 257 @State loadingProgressIndex: number = 0 258 @State clickFlag: number = 0 259 scroller: Scroller = new Scroller() 260 261 build() { 262 Column() { 263 Scroll(this.scroller) { 264 Column({ space: 5 }) { 265 Column() { 266 LoadingProgress() 267 .color('#106836') 268 .size({ width: '100%' }) 269 .contentModifier(new MyLoadingProgressStyle(this.loadingProgressList[this.loadingProgressIndex])) 270 }.width('100%').backgroundColor(0xdcdcdc) 271 }.width('100%').margin({ top: 5 }) 272 }.height('85%') 273 274 Button('Switch config.enableloading').onClick(() => { 275 this.clickFlag++ 276 this.loadingProgressIndex = (this.loadingProgressIndex + 1) % this.loadingProgressList.length 277 console.log('enableLoading:' + this.loadingProgressList[this.loadingProgressIndex]) 278 }).margin(20) 279 } 280 281 } 282} 283``` 284 285
