Docs
Spinner
Just a spinner to check the loading state
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/progress/spinner.jsonManual
Run the following command
It will create a new file called spinner.tsx inside the components/animata/progress directory.
mkdir -p components/animata/progress && touch components/animata/progress/spinner.tsxPaste the code
Open the newly created file and paste the following code:
import { cn } from "@/lib/utils";
interface SpinnerProps {
className?: string;
outerSize?: string;
childSize?: string;
}
export default function Spinner({ className, outerSize, childSize }: SpinnerProps) {
return (
<div
className={cn(
"m-2 h-8 w-8 animate-spin items-center justify-center rounded-full bg-linear-to-bl from-pink-500 to-blue-600 p-0.5",
className,
outerSize,
)}
>
<div className={cn("h-6 w-6 rounded-full bg-white", childSize)} />
</div>
);
}Credits
Built by Bibek Bhattarai