Spinner
Spinner is a small motion graphic element that indicates a loading state for quick, asynchronous tasks.
Guidance
Loading Spinners are used to notify the user that an action is being processed. This reassures the user of the system status.
Loading spinners can be presented in various sizes depending on the context in which the spinner is being used.
For fast processes (less than 300ms), a spinner may not be required. However, for a process that may take time, a spinner should be used.
Avoid showing multiple Loading Spinners on a single page.
When to use
- When fetching data or content, where the expected response time is greater than ~300ms.
- When loading more information into a Table or List.
Accessibility
For additional clarity for screen reader users, provide a message to the spinner that would explain to the user that the content is being loaded.
Message can be provided as a string or as an object in the format of { start: ... , end: ... }
, where the "start" message is announced when the Spinner appears and the "end" message is announced when the Spinner closes.
Variants
A Spinner can be used in various ways to indicate to the user that a task is in process.
Spinner within a list
- ActiveEric Soderberg
- InactiveShimrit Yacobi
- ActiveChris Carlozzi
- ActiveMatthew Glissmann
- InactiveTaylor Seamans
Spinner with announcement on screen reader
Spinner has a built-in Screen Reader functionality for more advanced accessibility support. The message prop is going to be the message given over the voice reader.
Spinner loading content
A Spinner allows users to know when something is being loaded without explicitly telling them. When using a spinner in a larger area you can increase the size of the spinner.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.