DocsComponentsBlog
Star us
Docs

Spinner

Just a spinner to check the loading state

Installation

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.tsx

Paste 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-gradient-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

Edit this page on GitHub
Animated TimelinePricing