Components · Loading and notifications

SpinnerSpinner

A loading arc without a backing

npx shadcn@latest add @umbra/spinner

A quarter-circle arc that rotates once per --loader-speed (0.9 s). No backing and no track. With prefers-reduced-motion the arc stands still

When to use

  • Loading or processing is underway, percentage unknown
  • In a list row thumbnail while a recording is being processed

When not to use

  • A placeholder for upcoming content: Skeleton
  • Progress is known: show real progress, not a spinner
  • For the sake of animation: there are no delays “for looks”

Meetings

7 recordings this week

New recordingProcessing the recording
Team standupTue, 10:00 · 32 min
Designer interviewMon, 16:30 · 48 min
Call with contractorFri, 12:00 · 21 min
Mockup reviewThu, 11:00 · 54 min
Sprint retroWed, 17:00 · 40 min
Meeting with lawyerWed, 12:30 · 25 min
Metrics reviewTue, 15:00 · 36 min

Don’t

  • A spinner made from an icon (CircleNotch etc.), a backing or a track under the arc
  • A spinner shown longer than needed: once the result is ready, open it right away