Spinner

Atomshadcn/ui, restyled with tokens

Something is happening and will finish soon.

components/atoms/spinner.tsx
Use it for
A short wait with nothing to lay out yet.
Not for
Inside a Button — pass loading instead. A page of content — use Skeleton.

States

Sizes

Usage

import { Spinner } from '@/components/atoms/spinner';

<Spinner />
<Spinner className="size-6 text-fg-accent" />

Props

Spinner props
PropTypeDefaultDescription
classNamestring—Size with size-*, colour with text-*.
...restComponentProps<'svg'>—Any native svg prop.

Accessibility

  • Announced as a status named “Loading”.