Loader

Component 268

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>
  );
}