Components
A HeroUI spinner — a lightweight animated loading indicator for buttons, panels, and full-page states. Built on HeroUI with current/accent/success/warning/danger colors and sm/md/lg/xl sizes.
Loading preview...
"use client"
import { Spinner } from "@/components/ui/heroui-spinner"
export default function Sizes() {
return (
<div className="flex w-full items-center justify-center gap-8 p-10">
<div className="flex flex-col items-center gap-2">
<Spinner size="sm" />
<span className="text-xs text-muted">Small</span>
</div>
<div className="flex flex-col items-center gap-2">
<Spinner size="md" />
<span className="text-xs text-muted">Medium</span>
</div>
<div className="flex flex-col items-center gap-2">
<Spinner size="lg" />
<span className="text-xs text-muted">Large</span>
</div>
<div className="flex flex-col items-center gap-2">
<Spinner size="xl" />
<span className="text-xs text-muted">Extra Large</span>
</div>
</div>
)
}