Spinner

Loading indicator with animation

Installation

pnpm add @wandercom/design-system-web

Usage

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

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

The spinner uses a conic gradient animation to create a gradient loading effect. It automatically adapts to our theme's primary color.

Loading example...

Sizing

The default size is 16px (size-4). While no other fixed sizes are defined yet, you can customize the size using the className prop:

<Spinner className="size-6" />
<Spinner className="size-8" />
<Spinner className="size-12" />

Props

className

string
Additional CSS classes for customization.
Spinner