Collaboration
Project Management
Social
Spinner
The Spinner component expands the shadcn spinner component with additional variants.
Installation
npx love-ui@latest add spinnerUsage
import { Spinner } from "@/components/spinner"<Spinner variant="throbber" size="lg" />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/love-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
Default
"use client"
import { Spinner } from "../../../../../packages/spinner"
const Example = () => <Spinner />
export default Example
Variants
default
throbber
pinwheel
circle-filled
ellipsis
ring
bars
infinite
"use client"
import { Spinner, type SpinnerProps } from "../../../../../packages/spinner"
const variants: SpinnerProps["variant"][] = [
"default",
"throbber",
"pinwheel",
"circle-filled",
"ellipsis",
"ring",
"bars",
"infinite",
]
const Example = () => (
<div className="grid h-screen w-full grid-cols-4 items-center justify-center gap-8">
{variants.map((variant) => (
<div
className="flex flex-col items-center justify-center gap-4"
key={variant}
>
<Spinner key={variant} variant={variant} />
<span className="font-mono text-xs text-muted-foreground">
{variant}
</span>
</div>
))}
</div>
)
export default Example
Customization
"use client"
import { Spinner } from "../../../../../packages/spinner"
const Example = () => <Spinner className="text-blue-500" size={64} />
export default Example