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.

Loading animation after Search begins

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.

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.

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.