LoadingIndicator

ReactProps

Github Storybook Markdown Copy for LLM

Loading Indicators are used to retrieve data or perform a slow action that helps notify users that their request is being processed. For full page loaders, use PageLoader.

Import

import { LoadingIndicator } from "@cfa/react-core";

Live Editor

Guidelines

When to use

• LoadingIndicator is for a localized wait while a background process runs, inline, in a section, or replacing a button label during submission.

Do

• Use it for actions expected to take a few seconds.
• Disable the triggering control while loading.

Avoid

• Using LoadingIndicator for an entire-page load. Use PageLoader.
• Using LoadingIndicator when completion percentage is known and a linear bar adds meaning. Use ProgressBar.
• Showing it for actions under about 1 second. The flash is more distracting than the wait.
• Showing multiple inline spinners on the same page at the same time.

Examples

Size

There are three sizes of LoadingIndicator: "md" by default, and "sm" | "lg".

Variant

There are three color variants: "brand" by default, and "dark" | "light". Use "light" on dark backgrounds.

Disabled

To disable the LoadingIndicator, set the isDisabled prop to true.

Accessibility

• Uses the React Aria ProgressBar in indeterminate mode, so the semantic role is progressbar.