> For the complete documentation index, see [llms.txt](https://docs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.thunkable.com/~/changes/wHhkjLVeheBnfbpghRnw/loading-icon.md).

# Loading Icon

## 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](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LbP0qRQuQSCGoQL1RKE%2F-LbUHy3COLQOteUQ_gId%2Fezgif.com-crop.gif?alt=media\&token=7bdd231b-9822-46cd-b0e2-3094b936efc9)

## Properties 

### Loading Icon

| Property | Description                   | Data Type |
| -------- | ----------------------------- | --------- |
| Color    | The color of the Loading Icon | Color     |

### Layout

| Property    | Description                                                                            | Data Type                                    |
| ----------- | -------------------------------------------------------------------------------------- | -------------------------------------------- |
| X           | Location of top left corner of Loading Icon on X-axis, where the left hand side is X=0 | Number                                       |
| Y           | Location of top left corner of Loading Iconon Y-axis, where the top side is Y=0        | Number                                       |
| Height      | Height of Loading Icon in pixels                                                       | Number                                       |
| Width       | Width of Loading Icon in pixels                                                        | Number                                       |
| Resize Mode | Define dimensions of the loading icon component/container                              | Select from list `[Stretch, Float in Place]` |

### **Style**

| Property       | Description                                                                             | Data Type                                  |
| -------------- | --------------------------------------------------------------------------------------- | ------------------------------------------ |
| Visible        | Toggle whether your end users can see the Loading Icon                                  | True/False                                 |
| Border Style   | Set whether border style is solid, dotted or dashed  (only visible if border width > 0) | Select from list `[solid, dotted, dashed]` |
| Border Color   | Color of border (only visible if border width > 0)                                      | Color                                      |
| Border Width   | Width of border around Loading Icon in pixels                                           | Number                                     |
| Border Radius  | Radius of corners of border on Loading Icon in degrees                                  | Number                                     |
| Shadow Color   | Color of loading icon's shadow                                                          | Color                                      |
| Shadow Opacity | Opacity of loading icon's shadow                                                        | Number between 0 and 100                   |
| Shadow Radius  | Radius of corners of loading icon's shadow in pixels                                    | Number                                     |
| Shadow Offset  | How far loading icon's shadow should be offset, in Height and Width, in pixels          | Number                                     |

## Blocks

### Properties

Set and get [properties](/~/changes/wHhkjLVeheBnfbpghRnw/loading-icon.md#properties) of the Loading Icon component.

#### Color 

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MjntGXwCIlNyep0DHOi%2F-MjnuMIEIy3wkXlPxo9C%2Floading%20icon%20color.png?alt=media\&token=90a6de39-db54-4c89-bb07-f6cb06314907)

#### Size 

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MjntGXwCIlNyep0DHOi%2F-MjnuTBV8zgt0dJOcWka%2Floading%20icon%20size.png?alt=media\&token=bd4d35e1-3750-4feb-9f9b-6f876b3fc263)

Select a size for the Loading Icon. Can choose between `extra small, small, middle, large,` or `extra large`.

#### Computed Height 

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MjntGXwCIlNyep0DHOi%2F-Mjnug4gaPJzs8RgBnvf%2Floading%20icon%20height.png?alt=media\&token=55c35336-7eab-4069-9830-fc49b0f34de0)

Returns the height of the Loading Icon on the device screen in pixels.

#### Computed Width

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MjntGXwCIlNyep0DHOi%2F-Mjnuo7unM407aISG9eq%2Floading%20icon%20width.png?alt=media\&token=7032988b-d063-45c0-bd79-12e5a25b5e14)

Returns the width of the Loading Icon on the device screen in pixels.

#### Visible 

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MjntGXwCIlNyep0DHOi%2F-MjnuschUqjzFe36c-Aq%2Floading%20icon.png?alt=media\&token=f5417c36-bb9b-422b-9de2-32f5f947087b)

## Demo: 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.

![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-MWj-R6ifvVhRiIOoskf%2F-MWj0kJxFCoXBSRa2eUs%2Fli_legacy.png?alt=media\&token=cdb462fb-d456-45c6-a1c5-86555af218cb)

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.

## See Also

If you want to show different styles of animations in your app as content loads, check out the [Animation](/~/changes/wHhkjLVeheBnfbpghRnw/lottie.md) component.