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
Color
The color of the loading icon.
Color
Layout
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
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.
Last updated
