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

<Spinner />

<div className="flex items-center gap-6">
  <Spinner size="sm" />
  <Spinner size="default" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</div>

<button disabled className="flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground">
  <Spinner size="sm" />
  Loading...
</button>

npx shadcn@latest add https://solar-ui.com/r/spinner.json

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
 
const spinnerVariants = cva(
  "inline-block animate-spin rounded-full border-2 border-current border-t-transparent",
  {
    variants: {
      size: {
        sm: "size-4",
        default: "size-5",
        lg: "size-6",
        xl: "size-8",
      },
    },
    defaultVariants: { size: "default" },
  }
)
 
function Spinner({
  className,
  size,
  ...props
}: React.ComponentProps<"span"> & VariantProps<typeof spinnerVariants>) {
  return (
    <span
      data-slot="spinner"
      role="status"
      aria-label="Loading"
      className={cn(spinnerVariants({ size }), className)}
      {...props}
    >
      <span className="sr-only">Loading…</span>
    </span>
  )
}
export { Spinner, spinnerVariants }