Spinner

Spinners are animated circles that let users know when information is saving or loading.
  • Examples
  • Properties
  • Accessibility

Examples

Backdrop

Contextual

Colors

By default, spinners are rendered in the same color as the text color defined on their parent container. Easily change a spinners color using the examples below.

Web Component

Accessibility

Keyboard Navigation

KeyFunction
TabMoves focus to the next element in the tab sequence. The spinner itself should not receive focus.
Shift + TabMoves focus to the previous focusable element. The spinner should not disrupt navigation.
EscIf the spinner is inside a modal or dialog, pressing Esc should close the container if applicable.

For detailed keyboard interactions, refer to our Keyboard Control Guide.

Visit WebAIM for general keyboard techniques.

Guidance for developers
  • Avoid focus on the spinner itself and provide meaningful feedback to screen reader users.
  • Use aria-hidden="true" if the spinner is purely decorative.
  • Announce dynamic changes using aria-live regions to communicate status updates.
  • If a spinner represents an indefinite loading state, use role="status" with an associated message.
  • Use aria-live="polite" or aria-busy="true" to announce loading state changes to assistive technologies.
  • Some users may experience motion sensitivity. Avoid rapid, flashing, or distracting animations.
  • Provide an option to pause, slow down, or disable spinner animations for users sensitive to motion.
  • Adhere to WCAG guidelines by ensuring animation lasts less than five seconds or can be controlled by the user.
Guidance for designers
  • Maintain sufficient contrast between the spinner and the background.
  • Provide alternative indicators of loading, such as textual cues or progress bars, when applicable.
  • Keep spinner animations subtle and non-intrusive to avoid distractions.
  • Ensure the spinner scales appropriately across different screen sizes and devices.

Explore live examples in the ARIA Practices Guide.

Resources

  • WCAG 2.2 Animation Guidelines: Recommendations for reducing animation effects for users with vestibular disorders.
  • MDN Guide on ARIA Live Regions: Explains how to communicate dynamic changes to assistive technologies.

Other recommendations

Find additional accessibility tips in our Accessibility Guide.

WCAG 2.2 Guidelines

  • Non-text Content: Ensure all badges conveying information have a text alternative. (Level A)
  • Info and Relationships: Maintain semantic structure for screen readers. (Level A)
  • Headings and Labels: Ensure badges have meaningful labels. (Level AA)
  • Labels or Instructions: Provide clear instructions for dismissible badges. (Level A)
  • Name, Role, Value: Define ARIA attributes correctly for badges. (Level A)