Spinner

A loading spinner component to indicate progress or loading states with customizable sizes and variants

Sizes

XS

SM

MD

LG

XL

Variants

Default

Primary

White

In Button

Centered in Container

Inline with Text

Processing your request...

Loading Overlay Example

Content Area

This represents some content that would be loading...

Loading content...

Spinner Component
tsx
1import React from "react";
2import { cn } from "@/lib/cn";
3

4interface SpinnerProps {
5  size?: "xs" | "sm" | "md" | "lg" | "xl";
6  variant?: "default" | "primary" | "white";
7  className?: string;
8}
9

10const Spinner: React.FC<SpinnerProps> = ({