Spinner

Use a spinner to provide feedback for processes where the completion time cannot be predicted.

Status

Component checklist

Component (RN)

React Native Component Status

Not Started

Figma (RN)

Figma Component Status

Published

Code (Web)

HTML/CSS Code

Published

Figma (Web)

Figma Component Status

Published

Key Points

Key points

  • Spinners indicate when a process of indeterminate length is still being processed
  • Only use if the wait time is expected to be longer than one second
  • This component should be used for indeterminate processes — use a progress bar for determinate processes
  • Spinners can appear on base and inverted surfaces
  • Web has four variants: 16px, 24px, 32px, and 48px
  • React Native has two variants: small and large
  • Spinners should always appear with supporting text
  • Use the appropriate size and place spinners centrally in the middle of the containing area

Use a spinner to indicate that a process is in progress when the duration or completion percentage is unknown.