Spinner

Spinner is an animated circular loader with 5 color variants and flexible sizing options.

Interactive example#

Spinner · Live example

Preparing your workspace…

Change the spinner size and complete the task to stop the loading state.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Import#

TSX

import { Spinner } from '@clidey/ux';

Variants#

TSX

<Spinner variant="default" />
<Spinner variant="primary" />
<Spinner variant="secondary" />
<Spinner variant="destructive" />
<Spinner variant="muted" />

Variant	Color
`default`	Foreground color
`primary`	Primary brand color
`secondary`	Secondary background
`destructive`	Red/destructive color
`muted`	Muted foreground

Sizes#

TSX

<Spinner size="sm" />    {/* 16px */}
<Spinner size="default" /> {/* 20px */}
<Spinner size="lg" />    {/* 32px */}
<Spinner size={48} />    {/* custom px */}

Inside a button#

TSX

<Button disabled>
  <Spinner size="sm" variant="default" />
  Loading...
</Button>

Full-page loading#

TSX

function LoadingScreen() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <Spinner size="lg" variant="primary" />
    </div>
  );
}

Inline loading in content#

TSX

function DataSection() {
  const { data, loading } = useData();

  if (loading) {
    return (
      <div className="flex items-center gap-2 text-muted-foreground">
        <Spinner size="sm" variant="muted" />
        <span>Loading...</span>
      </div>
    );
  }

  return <div>{/* render data */}</div>;
}

Props#

Prop	Type	Default	Description
`variant`	`"default" \| "primary" \| "secondary" \| "destructive" \| "muted"`	`"default"`	Color variant.
`size`	`"sm" \| "default" \| "lg" \| number`	`"default"`	Spinner size. Pass a number for custom pixel size.
`className`	`string`	—	Additional CSS classes.

Was this page helpful?