Spinner
An indicator that can be used to show a loading state.
Made by shadcnPowered by
When to use
Use this decision tree to determine when to use the Spinner component:
Installation
Usage
import { Spinner } from "@/components/ui/spinner"<Spinner />Anatomy
The Spinner component is a simple animated loading indicator. Here's how it's structured:
<Spinner /> {/* Animated icon with spin animation */}Layout Structure
- Spinner: Single SVG icon with
animate-spinanimation applied - Size controlled via className (
size-4,size-6, etc.) - Color controlled via text color utilities (
text-primary, etc.)
Typical Usage Patterns
// Standalone
<Spinner />
// Custom size
<Spinner className="size-8" />
// Custom color
<Spinner className="text-primary" />
// In button
<Button disabled>
<Spinner />
Loading...
</Button>
// In badge
<Badge>
<Spinner className="size-3" />
Processing
</Badge>
// In input group
<InputGroup>
<InputGroupInput placeholder="Searching..." />
<InputGroupAddon>
<Spinner />
</InputGroupAddon>
</InputGroup>
// In empty state
<Empty>
<EmptyHeader>
<EmptyMedia>
<Spinner className="size-8" />
</EmptyMedia>
<EmptyTitle>Loading data</EmptyTitle>
</EmptyHeader>
</Empty>
// In item
<Item>
<ItemMedia>
<Spinner />
</ItemMedia>
<ItemContent>
<ItemTitle>Processing...</ItemTitle>
</ItemContent>
</Item>Customization
You can replace the default spinner icon with any other icon by editing the Spinner component.
import { LoaderIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
return (
<LoaderIcon
role="status"
aria-label="Loading"
className={cn("size-4 animate-spin", className)}
{...props}
/>
)
}
export function SpinnerCustom() {
return (
<div className="flex items-center gap-4">
<Spinner />
</div>
)
}import { LoaderIcon } from "lucide-react"
import { cn } from "@/lib/utils"
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
return (
<LoaderIcon
role="status"
aria-label="Loading"
className={cn("size-4 animate-spin", className)}
{...props}
/>
)
}
export { Spinner }Examples
Size
Use the size-* utility class to change the size of the spinner.
Color
Use the text- utility class to change the color of the spinner.
Button
Add a spinner to a button to indicate a loading state. The <Button /> will handle the spacing between the spinner and the text.
Badge
You can also use a spinner inside a badge.
Input Group
Input Group can have spinners inside <InputGroupAddon>.
Empty
Item
Use the spinner inside <ItemMedia> to indicate a loading state.
API Reference
Spinner
Use the Spinner component to display a spinner.
| Prop | Type | Default |
|---|---|---|
className | string | `` |
<Spinner />Props
Credits
- We take our inspiration from Shadcn UI for the
spinnercomponent and style.
Built by malinskibeniamin. The source code is available on GitHub.