║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Spinner description: The Spinner component expands the shadcn spinner component with additional variants. icon: Loader dependencies:

• https://lucide.dev/ installer: spinner

---

You can replace the shadcn spinner with this component to get the additional variants.

import { Spinner } from "@/components/ui/spinner"; // [!code --]
import { Spinner } from "@/components/kibo-ui/spinner"; // [!code ++]

Features

• Multiple size variants (sm, default, lg)
• Multiple variants (throbber, pinwheel, circle-filled, etc.)
• Default variant is the shadcn spinner
• Customizable colors and styles
• Accessible loading indicator

Examples

Variants

<Preview path="spinner-variants" />

Customization

<Preview path="spinner-customization" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║