Spinner

Anatomy

Guidelines

When to use

The Spinner serves to inform the user that a short background process is running and incomplete. When using the Spinner, prefer use cases that expect shorter wait times such as submitting a form or loading data sets.

Placement

Spinners are versatile and can be placed within any area to denote a loading state, including buttons, modals, panels, and pages. Place Spinners appropriately based on the scope it's associated with:

• Content area: Within content areas such as panels or pages, center the spinner until data is loaded. To create a loading modal, nest the Spinner within the Blanket component.
• Inline: Place inline Spinners next to the content that is expected to load. For additional context, consider enabling the Spinner label.

Spinner vs Skeleton

Spinners and Skeletons are components that, at first glance, have similar functionality. However, it's important to understand the difference as they are not interchangeable:

• Spinners are used inline with supporting text or within larger content areas when the layout of the area is unknown or unpredictable.
• Skeletons are intended to reserve space for loading data in predictable layouts such as within cards or tables.

Best practices

Color use

Spinner color may be changed if necessary, but be sure to use colors to convey a common semantic meaning. Avoid updating colors to meet the needs of a particular color scheme or theme.

For more information regarding Spinner color accessibility, see Color and meaning in the Accessibility tab.

Appearance

Colors

The Spinner includes the multiple semantic colors to choose from to fit the appropriate context. Label text can be set to inherit the currently set text color.

Behaviors

Reduced motion

When a user has enabled reduced motion preferences in their operating system, the Spinner automatically replaces the rotating animation with a static dotted circle. This ensures the loading state is still communicated without relying on active motion.

For more information from an accessibility perspective, see the Using motion section within the Accessibility tab.

Content

Label

Label text can be enabled to describe the action or process currently in progress. Labels are best used when the Spinner has no other associated context to describe it within the workflow.

Keep labels to single words or short phrases, especially when content space is limited. The label may be omitted if context is clear or used within a button or near some other status indicator.