Spinner
Component
Live
The Spinner component indicates an ongoing process or loading state.
- Usage
- Examples
- Properties
- Accessibility
- CSS Variables
Usage
The Spinner displays a animated circle to indicate a process is ongoing in the background, encouraging patience. Once the process completes, the Spinner fades or hides, and is replaced by the loaded content.
Installation
Install
yarn add @iag/chroma-react-ui.components
Import
import { Spinner } from "@iag/chroma-react-ui.components";
When to use
Use a Spinner to signal an ongoing process when the anticipated wait time is greater than 1 second or when the wait time is unknown.
When to avoid
Avoid using Spinner for instant actions or when wait time is less than a second. Also avoid when the wait time can be predicted. In this case, consider the Progress Loader component.
Do
- Do position the Spinner in relation to the user's focus.
- Do position the Spinner centrally to where the data is loading.
- Do ensure the Spinner fades or hides once content loads,
Sighted Users
The Spinner primarily serves sighted users, as its functionality is purely visual. Consider other feedback forms for non-sighted users.