1# LoadingProgress 2 3The **\<LoadingProgress>** component is used to create a loading animation. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17LoadingProgress() 18 19Creates a **\<LoadingProgress>** component. 20 21Since API version 9, this API is supported in ArkTS widgets. 22 23## Attributes 24 25In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 26 27| Name| Type| Description| 28| -------- | -------- | -------- | 29| color | [ResourceColor](ts-types.md#resourcecolor) | Foreground color of the **\<LoadingProgress>** component.<br>Default value: **'#99666666'**<br>Since API version 9, this API is supported in ArkTS widgets.| 30| enableLoading<sup>10+</sup> | boolean | Whether to show the loading animation.<br>Default value: **true**<br>**NOTE**<br> The component still takes up space in the layout when the loading animation is not shown.<br>Unlike the universal attribute **Visibility.Hidden**, which hides the entire component, including borders and paddings, **enableLoading=false** hides the loading animation only.| 31 32## Events 33 34The [universal events](ts-universal-events-click.md) are supported. 35 36## Example 37 38```ts 39// xxx.ets 40@Entry 41@Component 42struct LoadingProgressExample { 43 build() { 44 Column({ space: 5 }) { 45 Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%') 46 LoadingProgress() 47 .color(Color.Blue) 48 }.width('100%').margin({ top: 5 }) 49 } 50} 51``` 52 53 54
