Loading Icon

Video Tutorial

Loading Icon Overview

For activities that take more than a few seconds, loading icons can be helpful to tell your app users that an activity is happening in the background, such as retrieving or uploading data.

The large loading icon is on the top; the small is on the bottom on a Pixel 3

Style the Loading Icon

Property	Description
Color	The color of the loading icon
Size	Small or large

Showing and Hiding the Loading Icon

The loading icon should be displayed when the app is performing an activity in the background and hidden when it is not.

One way to show and hide the icon is to use the visible property of the component.

In the following example the loading icon shows up when the app opens but disappears after data is retrieved from Airtable.

When the visibility is set to true, the loading icon will be seen on the app screen. If set to false, the loading icon will not be seen on the app screen.

Properties

Color

Height

Size

Visible

Width

See Also

You can use the Animation component to display a JSON animation from Lottie in your project. Lottie offer a wide range of animations that can be displayed as content in your project loads.