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 Colors() {
return (
<div className="flex w-full items-center justify-center gap-8 p-10">
<div className="flex flex-col items-center gap-2">
<Spinner color="current" />
<span className="text-xs text-muted">Current</span>
</div>
<div className="flex flex-col items-center gap-2">
<Spinner color="accent" />
<span className="text-xs text-muted">Accent</span>
</div>
<div className="flex flex-col items-center gap-2">
<Spinner color="success" />
<span className="text-xs text-muted">Success</span>
</div>
<div className="flex flex-col items-center gap-2">
<Spinner color="warning" />
<span className="text-xs text-muted">Warning</span>
</div>
<div className="flex flex-col items-center gap-2">
<Spinner color="danger" />
<span className="text-xs text-muted">Danger</span>
</div>
</div>
)
}