Loading Icon Component

Overview

The loading Icon is an animated graphical component used to notify users of your app that an action is taking place in the background, such as retrieving or uploading data. They serve as visual cues to users, signaling that the app is working behind the scenes, reducing uncertainty and providing reassurance while enhancing the overall user experience by managing expectations during brief wait times.

Properties

Loading Icon

Layout

Style

Loading Icon Blocks

Properties Blocks

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a button to be enabled for a user until they've typed a set number of characters into a text input component, you can use the button's dark green set button's disabled status block.

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).

Size

The size property is unique to the loading icon. Using these blocks, you can set the size of the loading icon. You can choose between extra small, small, middle, large, or extra large.

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 becomes visible when the screen opens but disappears once data is retrieved from Airtable.

The loading icon displays on the app screen when the visibility property is true. The loading icon does not show on the app screen if the visibility property is false.

See Also

If you want to show different animation styles in your app as content loads, you can use the animation component. You can learn more here: Animation Component.

Last updated