Collaboration
Project Management
Finance
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-muted-foreground text-xs">
{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;