Spinner - TypeScript UI

A simple animated loading indicator built on the Lucide Loader2 icon, with size variants for inline use, buttons, and empty states.

Spinner Examples

Sizes

Inside a Button

In an Empty State

Loading data

Please wait while we fetch the latest results.

Installation

# The component is already installed at:
# src/components/ui/shadcn/spinner.tsx

Usage

import { Button } from '@/components/ui/shadcn/button'
import { Spinner } from '@/components/ui/shadcn/spinner'

export function SpinnerDemo() {
  return (
    <Button disabled>
      <Spinner />
      Loading...
    </Button>
  )
}

Props

Prop	Type	Default	Description
size	`sm` \| `default` \| `lg` \| `xl`	`default`	Controls the size of the spinner

Components

Component	Description
Spinner	An animated loading icon