Feedback and states · §5.27

Progress and spinner

Inline progress for work in the background.

Theme
Contrast
Language
Motion
Text size

Code

<Progress aria-label="Syncing" value={64} />

Accessibility

  • Progress has a label and a value; spinners sit inside buttons.

Usage

Do

  • A 2 px bar under the header for background sync.

Don't

  • No spinner for page content.

Platforms

Web
apps/web/components/ui/progress.tsx, apps/web/components/ui/spinner.tsx
iOS
SwiftUI ProgressView
Android
Compose LinearProgressIndicator