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/spinnerUsage
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"
/>