Spinner

Loading

Animated loading spinner indicator.

Preview

Loading...
Loading...
Loading...

Usage

example.jsx
import { Spinner } from "@/components/ui/spinner";

export default function Example() {
  return <Spinner />;
}

Source Code

Copy this file into components/ui/spinner.jsx in your project.

spinner.jsx
import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Spinner = forwardRef(({ className, size = "md", ...props }, ref) => {
  const sizes = { sm: "h-4 w-4 border-2", md: "h-8 w-8 border-4", lg: "h-12 w-12 border-4" };
  return (
    <div ref={ref} className={cn("animate-spin rounded-full border-muted border-t-primary", sizes[size], className)} role="status" {...props}>
      <span className="sr-only">Loading...</span>
    </div>
  );
});
Spinner.displayName = "Spinner";

export { Spinner };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge