Spinner
LoadingAnimated 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