About
A visually engaging loader with a "gooey" liquid-like animation effect, perfect for indicating loading states in a stylish way.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Loader to your project and fits it to your theme.
Code
How Loader is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { GooeyLoader } from "@/components/ui/loader-10"; // Adjust path as needed
export default function GooeyLoaderDemo() {
return (
// A minimal container to center the component for presentation.
<div className="flex items-center justify-center w-full min-h-[250px]">
<GooeyLoader
primaryColor="#f87171" // red-400
secondaryColor="#fca5a5" // red-300
borderColor="#e5e7eb" // gray-200
/>
</div>
);
}