Agent Wave Loader

AI chats 126

About

A loading indicator for AI agent work — a signal arcs across Claude Code, Codex, Gemini, DeepSeek and Kimi marks, lifting each as it passes. Respects prefers-reduced-motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Agent Wave Loader to your project and fits it to your theme.

Code

How Agent Wave Loader is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AgentWaveLoader } from "@/components/ui/agent-wave-loader";

export default function AgentWaveLoaderDemo() {
  return (
    <div className="flex min-h-[240px] w-full flex-col items-center justify-center gap-10 p-8">
      <AgentWaveLoader />
      <AgentWaveLoader label="Routing to the best model…" />
      <AgentWaveLoader label="Taking my time…" durationMs={4000} />
    </div>
  );
}