pnpm add @wandercom/design-system-web

import { Spinner } from '@wandercom/design-system-web/ui/spinner';

export function Example() {
  return <Spinner />;
}

The spinner draws a muted circular track with a primary arc that rotates continuously. Both colors come from the theme, so it adapts to light and dark modes. For compact or inline contexts where the spinner feels too heavy, use LoadingDots instead.

The default size is 20px (size-5). The stroke and arc scale proportionally, so any size renders crisply via the className prop. The large full-page variant from the design system is 40px (size-10):

<Spinner />
<Spinner className="size-10" />

The component accepts all standard <svg> props.

The spinner is aria-hidden by default — pair it with visible or sr-only text, or a role="status" container, when it is the only loading indication. Passing aria-label marks it role="img" and announces the label instead.