Spinner

npx shadcn@latest add spinner

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

<Spinner />

<Spinner className="size-6" />
<Spinner className="size-8" />
<Spinner className="size-12" />

<Button disabled>
  <Spinner className="mr-2" />
  Loading...
</Button>

function DataComponent() {
  const [loading, setLoading] = useState(true)

  if (loading) {
    return (
      <div className="flex items-center justify-center p-8">
        <Spinner className="size-8" />
      </div>
    )
  }

  return <div>Data content</div>
}

<div className="flex items-center gap-2">
  <Spinner />
  <span>Loading data...</span>
</div>

import { Loader2Icon } from "lucide-react"
import { cn } from "@/lib/utils"

function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <Loader2Icon
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}

export { Spinner }