# Loading screen

The loading screen element allows you to display a loading animation while your page's elements and data are being loaded beneath. You will want to include this on every page where you want this behavior.

The element can be found under **Visual elements**. 

![](/files/-MbcyfBE_tMg-loVKtNW)

Simply drag it on to the page in order for it to be active. No matter how large the element is, it will always take up the full width of the page. Make it 1x1 pixels and place it in the top right corner of the page to avoid responsiveness issues. 

![](/files/-Mbd-opjRdAbCi8Ssb_0)

The properties panel provides several options for customizing the behavior and appearance of the loader.

There are two ways in which you can use the loading element.

**1.** **Display by default on page load**

If the element is set to be visible on page load, a loading screen will appear on the page until you explicitly hide it. In order to have it disappear once the page's elements are loaded, you can either:

1. Create a workflow which is triggered when the page is loaded & loaded above the fold. Attach the **Hide loading screen** action. 
2. Check the loading screen element's **Auto close** option

![](/files/-Mbd0ebBbn4Jb_eyiiHW)

![](/files/-Mbd1-6vboKrdOuyJWvX)

**2. Manually set when to show/hide the loader**

Under Workflow actions > Plugins, you have two loader actions, one to show the loader and one to hide it. Use these to show the loader while specific workflows are firing (i.e. while making bulk changes to a list). 

![](/files/-Mbd2Akr0co9cYSrH1U6)

### **Customizing the loader style**

![](/files/-MbrHlv7uUc5ZNw9k7Ii)

**Updating the animation**\
\
You can change the loader animation by pasting in a new animation json URL from [lottiefiles.com](https://lottiefiles.com/search?q=loader\&category=animations) (requires signup). Adjust the width and height in the code below to modify the size of the animation.

```
<lottie-player src="
https://s3.amazonaws.com/appforest_uf/f1622680371274x297542111769113480/lottie_loader2.json
" background="transparent" speed="1" style="width: 140px; height: 140px;" loop autoplay></lottie-player>
```

![](/files/-Mbd5mnqbKNQR9L8vTHb)

**Updating the loading screen text**\
\
Modify the code in the loading screen element's text field to tweak the font size, color, weight, line height, and description.

```
<div style="display: block"><h3 style="font-size:23px; font-weight: 600; line-height: 36px">Please wait</h3><p style ="color: #6B7280">Setting up your portal</p></div>
```

![](/files/-MbrTN_Ntjadlm_4a21D)


---

# 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.airdev.co/canvas/canvas-functionality/miscellaneous/loading-screen.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.