Anatomy
|
# |
Element type |
Element name |
Element description |
|---|---|---|---|
|
1 |
Illustration |
Globe Illustration |
The static illustration of a globe with airplanes flying around it, indicating a loading process. |
|
2 |
Text |
Primary Text |
The main message informing users that the system is processing (e.g., “Please wait…”). |
|
3 |
Progress Bar |
Loading Indicator |
A visual progress bar showing the progression of the loading task. |
|
4 |
Text |
Subtext |
Additional message offering more context (e.g., “It shouldn’t take much longer”). |
Types
The loader component comes in three different types, each providing varying levels of user feedback during loading periods:
-
Default Loader (Static Animation):
This is the basic loader with just the animation of a globe and airplanes, indicating that a process is ongoing. There is no text or additional information shown. -
Loader with Text:
In addition to the static animation, this variant includes text (e.g., “Please wait…”) to provide users with a more direct message, indicating that the system is working and they should wait for the process to complete. -
Loader with Subtext:
This is the most detailed loader type, featuring the static animation, primary text (“Please wait…”), and an additional subtext (e.g., “It shouldn’t take much longer”) for further reassurance. This subtext offers more context to users about the loading process.