Thinking Indicator

AI chats 31

About

An animated AI loading indicator with a morphing sparkle glyph and cycling status words like "Thinking" or "Reasoning", used to show an AI agent is working on a response.

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

Code

How Thinking Indicator is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { ThinkingIndicator } from "@/components/ui/thinking-indicator";

export default function ThinkingIndicatorDemo() {
  return (
    <div className="flex min-h-[300px] w-full items-center justify-center bg-background">
      <ThinkingIndicator
        words={["Thinking", "Reasoning", "Planning"]}
        interval={8000}
      />
    </div>
  );
}