Skip the navigation

Loading

The loading indicator component is a visual cue used to indicate that a process or action is in progress.

  • Figma:Ready
  • Web:Ready
  • iOS:Ready
  • Package:Core

Usage

import { Loading } from "@caesars-ui/core";

Properties

* indicates required.

Accessibility

Principle

Status

Description

Percievable
Ready
The Loading component provides a clear visual cue, indicating that a process or action is in progress. It utilizes appropriate animations or visual elements, such as spinners or dots, to convey the loading state. The size and color of the loading indicator are adjustable based on the provided properties.
Operable
Ready
The Loading component itself is not directly operable, as it is a visual cue rather than an interactive element. However, it should not interfere with the operability of other elements on the page, ensuring users can still interact with the available content while the loading indicator is displayed.
Understandable
Ready
The purpose of the Loading component is clear, visually indicating that a process or action is ongoing. The type of loading indicator (dots, spinner, etc.) and its associated size and color variant can be customized based on the provided properties. Additionally, the option to include a label underneath the Loading Spinner provides additional context or information to users.
Robust
Ready
The Loading component is designed to be compatible with assistive technologies, ensuring that users relying on screen readers or other accessibility tools are aware of the loading state. It functions consistently across different browsers and platforms. The Loading component can be easily integrated into various parts of the application to provide a consistent loading experience