Clinia UI

Spinner

An indicator that something is loading, on its own or inside a button.

shadcn docs →

When to use

  • An action is running and the wait is short: saving, connecting a source.
  • Inside a button, next to its label, while its action runs.

When not to use

  • Content is loading into a known layout: use Skeleton.
  • A task with a known length, such as an upload: use Progress.

Install

npx shadcn@latest add @clinia/spinner

Clinia rules

  • The default size is size-4 (16px), to sit next to text-sm labels.
  • In a button, keep the label and switch it to the ongoing action: Saving, not Save.

Do and don't

Do keep a label beside the spinner.
Don't replace the label with a spinner.

Accessibility

Built in

  • Renders role="status" with aria-label="Loading".
  • Stops spinning under prefers-reduced-motion, like every other animation.

Your responsibility

  • Disable the button while its action runs, so it can't be pressed twice.
  • For a longer wait, say what is happening in text next to the spinner.

How to test

  1. Turn on reduced motion in the OS: the spinner stops turning.
  2. Inspect the spinner in the accessibility tree: it exposes role="status" and the name Loading.
  3. Tab to a busy button: it's disabled, and its label still says what's happening.

API

Every prop comes from the native svg element.

Related