About
Full-screen preloader that exits with a slide-up animation when the page is ready.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Preloader to your project and fits it to your theme.
Code
How Preloader is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import Preloader from "@/components/ui/preloader";
export default function DemoOne() {
return (
<div className="h-dvh w-full bg-gradient-to-r from-indigo-700 flex flex-col items-center justify-center gap-4 text-center px-4">
<Preloader />
<h1 className="text-white text-5xl font-bold tracking-tight">
Something..
</h1>
<p className="text-gray-200 text-lg max-w-md">
A minimal, smooth preloader for your next React project.
</p>
<button
onClick={() => window.location.reload()}
className="mt-4 px-6 py-2 text-sm bg-gray-100 text-black rounded-full hover:bg-white cursor-pointer">
Replay
</button>
</div>
);
}