Glitchcn

Spinner

Loading spinner with multiple sizes and variants

Preview

Sizes

Small
Default
Large
XL

Variants

Default
Destructive

Loading Overlay

Loading data...
Installation
npx shadcn@latest add @glitchcn/spinner
Usage
import { Spinner, LoadingOverlay } from "@/components/ui/spinner"

// Basic spinner
<Spinner />

// Different sizes
<Spinner size="sm" />
<Spinner size="lg" />
<Spinner size="xl" />

// Variants
<Spinner variant="default" />
<Spinner variant="destructive" />

// Loading overlay
<div className="relative">
  <LoadingOverlay text="Loading data..." />
  {/* Your content */}
</div>

// Loading overlay with custom variant and size
<LoadingOverlay 
  text="Processing..." 
  variant="destructive" 
  size="xl"
/>