Spinner

A loading spinner component for indicating loading states.

Import

import { Spinner } from '@/components/ui';

Basic Usage

<Spinner />

Props

Sizes

<Spinner size="sm" />  {/* 16x16px */}
<Spinner size="md" />  {/* 24x24px (default) */}
<Spinner size="lg" />  {/* 32x32px */}

With Button

<Button disabled>
  <Spinner size="sm" className="mr-2" />
  Loading...
</Button>

Loading State Example

'use client';
import { useState } from 'react';
import { Spinner, Button } from '@/components/ui';

export function SubmitButton() {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = async () => {
    setIsLoading(true);
    await submitForm();
    setIsLoading(false);
  };

  return (
    <Button onClick={handleClick} disabled={isLoading}>
      {isLoading ? (
        <>
          <Spinner size="sm" className="mr-2" />
          Submitting...
        </>
      ) : (
        'Submit'
      )}
    </Button>
  );
}

Full Page Loading

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

Inline Loading

export function InlineLoader() {
  return (
    <div className="flex items-center gap-2">
      <Spinner size="sm" />
      <span className="text-sm text-zinc-500">Loading data...</span>
    </div>
  );
}

Custom Color

<Spinner className="text-blue-500" />
<Spinner className="text-green-500" />
<Spinner className="text-purple-500" />

With Card

<Card className="p-8">
  <div className="flex flex-col items-center gap-4">
    <Spinner size="lg" />
    <p className="text-zinc-500">Loading content...</p>
  </div>
</Card>