HPE
Design System
Foundation
Components
Templates
Extend
Jump to section
Guidance
When to use
Accessibility
Variants
Spinner within a list
Spinner with announcement on screen reader
Spinner loading content
Components

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

  • Eric Soderberg
    Active
  • Shimrit Yacobi
    Inactive
  • Chris Carlozzi
    Active
  • Matthew Glissmann
    Active
  • Taylor Seamans
    Inactive

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.

MLOPS139906-82-11570

StatusApplianceStarted onLast updated
ActiveMLOPS on HPE container Platform2020-11-22 04:05:31.02020-11-22 04:05:31.0

Related

Related content you may find useful when using Spinner.

HPE Lists Preview
Lists
Go-to patterns for displaying many services, devices, users, and more.
HPE Tables Preview
DataTable
DataTable presents data in a column and row format.
HPE Forms Preview
Forms
Common form use cases from application configuration to payment acceptance.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page