Loading Icon Component


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.


Loading Icon

PropertyDescriptionData Type


The color of the loading icon.



PropertyDescriptionData Type


Location of the top left corner of the loading icon on the X-axis, where the left-hand side is X=0.



Location of the top left corner of the loading icon on the Y-axis, where the top side is Y=0.



Height of loading icon in pixels.



Width of loading icon in pixels.


Resize Mode

Define dimensions of the loading icon component.

Select from list [Stretch, Float in Place]


PropertyDescriptionData Type


Toggle whether your end users can see the loading icon.


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)


Border Width

Width of border around loading icon in pixels.


Border Radius

The radius of corners of the border on the loading icon in degrees.


Shadow Color

Color of loading icon's shadow.


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.


Shadow Offset

How far loading icon's shadow should be offset, in height and width, in pixels.


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.).


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