Spinner

A customizable loading spinner component that offers various animated icons, suitable for buttons, forms, and asynchronous UI states.

---
import { Spinner } from "@/src/components/spinner"
---

<Spinner icon="loader" />

pnpm dlx hybrid-astro-ui@latest add spinner

npx hybrid-astro-ui@latest add spinner

yarn dlx hybrid-astro-ui@latest add spinner

bunx hybrid-astro-ui@latest add spinner

You can use it together with the Button component like this:

---
import { Spinner } from "@/src/components/hybrid-astro-ui/spinner"
import { Button } from "@/src/components/hybrid-astro-ui/button"
---

<div class="grid grid-cols-1 md:grid-cols-3">
    <Button disabled>
        <Spinner icon="loader" />
        <span>Loading...</span>
    </Button>

    <Button disabled variant="outline">
        <Spinner icon="loader-circle" />
        <span>Loading...</span>
    </Button>

     <Button disabled>
        <Spinner icon="loader-pinwheel" />
        <span>Loading...</span>
    </Button>
</div>