Loader

The Loader component displays a progress bar with a customizable title, image, and additional content, providing users with visual feedback during loading processes.

Storybook failed to load. Please connect to the VPN to access.

Loader with text and sub text


Anatomy

Loader anatomy

Loader 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:

  1. 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.
  2. 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.
  3. 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.
Storybook failed to load. Please connect to the VPN to access.

Default

Storybook failed to load. Please connect to the VPN to access.

With text

Storybook failed to load. Please connect to the VPN to access.

With text and subtext