# Loading Icon

## Video Tutorial

{% embed url="<https://youtu.be/y7WnblzAt2c>" %}

## 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](/files/-LbUHy3COLQOteUQ_gId)

## Style the Loading Icon&#x20;

| 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.&#x20;

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.

![](/files/-MWj0kJxFCoXBSRa2eUs)

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&#x20;

![](/files/-MWd1WatG3nklOsnL_Ya)

### Height&#x20;

![](/files/-MWd1Ypx2cVB6dbkZ_at)

### Size&#x20;

![](/files/-MWd1_AU9YmliBJ34R4g)

### Visible&#x20;

![](/files/-MWd1aJpkjrOlFZS8eQx)

### Width

![](/files/-MWd1bRw5wzZKc8ZppTc)

## See Also

You can use the [Animation](/snap-to-place/lottie.md) 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.thunkable.com/snap-to-place/loading-icon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.