# Set loading animations

Acho provides support for setting up loading animations through actions in interactions. With the power of action flow, you can control when and how these loading animations are triggered. Loading animations add visual feedback to elements during updates or data retrieval, enhancing the user experience of your app.

You’ll be able to set up loading animations on elements when they are being updated. For example, if you filter your table, the loading animation will appear as the table is being updated.

<figure><img src="/files/6FTVLaqw6Cw2XUHjQ8Bn" alt=""><figcaption><p>Loading animation after Search begins</p></figcaption></figure>

You’ll need two interactions to set this up. One to start the animation when an event occurs, and one to stop the animation.

## Start animation

1. To start the animation, add an interaction on the element that will trigger it. This example will start a loading animation on a table when the button is clicked.
2. Choose Element as the action, and select the element that you’d like to add the animation to.
3. Then choose Set Loading as the method and set the parameter loading to `true`.

<figure><img src="/files/ZQ9fSoA2HUd8UJntplhr" alt=""><figcaption></figcaption></figure>

## Stop animation

1. To stop the animation, add an event to set loading to `false`. Select an event to trigger the animation to stop. In this example, the Event is a data update on the data node named revenue\_sample. Once the node is finished updating, the loading will stop.
2. Similarly, select Element → your page -> your element, and Set Loading. But this time, enter `false` as the loading value.

<figure><img src="/files/Ov93Og7bbukQ1JujPhjz" alt=""><figcaption></figcaption></figure>

## Set loading parameters:

When using the set loading action in our app builder software, you have the following parameters available to customize the loading behavior:

1. **Loading**: This parameter accepts only a boolean value (`true` or `false`) and determines whether the loading animation is activated or deactivated.
2. **Text**: You can specify the text to be displayed alongside the loading indicator. This parameter allows you to provide relevant information or messages to users while the loading process is ongoing.
3. **Mask Color**: This parameter defines the color of the background mask that appears behind the loading indicator. You can choose a suitable color that matches the design of your app.
4. **Text Color**: This parameter sets the color of the text displayed alongside the loading indicator.
5. **Icon Color**: This parameter sets the color of the loading icon. Select a color that aligns with your app's design guidelines and provides good visibility.
6. **Size:** This parameter determines the size of the loading indicator.

By adjusting these parameters, you can tailor the loading action to match your app's design language and provide users with better interaction experience.


---

# 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.acho.io/app-builder/popular-use-cases/set-loading-animations.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.