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

Property	Description	Data Type
Color	The color of the loading icon.	Color

Layout

Property	Description	Data Type
X	Location of the top left corner of the loading icon on the X-axis, where the left-hand side is X=0.	Number
Y	Location of the top left corner of the loading icon on the Y-axis, where the top side is Y=0.	Number
Height	Height of loading icon in pixels.	Number
Width	Width of loading icon in pixels.	Number
Resize Mode	Define dimensions of the loading icon component.	Select from list [Stretch, Float in Place]

Style

Property	Description	Data Type
Visible	Toggle whether your end users can see the loading icon.	True/False
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)	Color
Border Width	Width of border around loading icon in pixels.	Number
Border Radius	The radius of corners of the border on the loading icon in degrees.	Number
Shadow Color	Color of loading icon's shadow.	Color
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.	Number
Shadow Offset	How far loading icon's shadow should be offset, in height and width, in pixels.	Number

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.