Loader

A Loader component is a visual indication that content is being loaded or processed. It displays a spinning animation accompanied by the text "Loading...". This component is essential for providing feedback to users during data fetching or processing.

Maturity level - ready for production

View the React component implementation details and all variants in Storybook.

Component examples

Guidance

Please note that this component is only available in the React Component library.

When to use a loader

  • Fetching data. Display the Loader component while fetching data from an API.
  • Processing. Indicate that a process is ongoing, such as form submission or file upload.

Use a progress indicator for any action that takes longer than about 1 second. 

Use a spinner or looped animation to offer feedback that the system is working, but it doesn’t give any information about how long the user will have to wait.

Best Practices

In Nielson Norman’s Ten Usability Heuristics, the first principal Visibility of System Status, states that the design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

Appropriate feedback serves to keep users informed of the current status and to allow them to steer the interaction in the right direction, without wasting effort. Loading indicators communicate that the system is working, and reduce uncertainty — preventing users from tapping the same button multiple times because they weren’t sure if the first time worked.

Accessibility

  • Keyboard Navigation. Ensure the user can navigate to the Loader component using the Tab key.
  • Screen Readers. Provide an accessible name for screen readers using ARIA attributes.