AI Thinking Indicator
AI
Feedback
Loading states showing AI is processing a request. Three visual variants: bouncing dots, spinning text, and pulsing brain for different contexts.
Preview
Interactive preview with variant selection
Variant:
Variants
Three different visual styles for different contexts
Dots - Animated bouncing dots with staggered delays
Text - Spinning loader with customizable text
Thinking...
Steps - Pulsing brain icon for analysis processes
Analyzing your request...
Without Avatar
Hide the AI avatar icon for compact layouts
Thinking...
Analyzing your request...
Custom Text
Override default text for text and steps variants
Processing your request...
Reviewing code changes...
Props
AIThinkingIndicator component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'dots' | 'text' | 'steps' | 'dots' | Visual style variant for the indicator |
text | string | — | Custom text for text and steps variants. Defaults: "Thinking..." or "Analyzing your request..." |
showAvatar | boolean | true | Show the AI avatar icon with gradient background |
className | string | — | Additional CSS classes for the container |
Usage
Import and implementation example
import { AIThinkingIndicator } from '@/components/ui/ai-thinking-indicator'
export default function Example() {
return (
<>
{/* Dots variant (default) */}
<AIThinkingIndicator />
{/* Text variant with spinner */}
<AIThinkingIndicator variant="text" />
{/* Steps variant with brain icon */}
<AIThinkingIndicator variant="steps" />
{/* Custom text */}
<AIThinkingIndicator
variant="text"
text="Processing your request..."
/>
{/* Without avatar for compact display */}
<AIThinkingIndicator
variant="dots"
showAvatar={false}
/>
{/* Centered layout */}
<AIThinkingIndicator
variant="steps"
className="justify-center"
/>
</>
)
}Features
Built-in functionality
- Three variants: Dots, text, and steps for different contexts and UX needs
- Animated dots: Bouncing dots with staggered animation delays (0s, 0.15s, 0.3s)
- Spinning loader: Loader2 icon with spin animation for text variant
- Pulsing brain: Brain icon with pulse animation for analysis steps
- AI avatar: Gradient background (indigo to teal) avatar with Sparkles icon
- Custom text: Override default loading text for text and steps variants
- Toggle avatar: Show or hide the AI avatar for compact layouts
- Dark mode: Full dark mode support with proper colors
Accessibility
Accessibility considerations
ARIA Attributes
Uses semantic div structure for layoutText content is readable by screen readersIcons are decorative and support the textKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Component is non-interactive, purely informational |
Notes
- Consider adding role="status" for live region announcement
- Add aria-label="Loading" for screen reader context when using dots variant
- Animations use CSS animations that respect prefers-reduced-motion
- Text variants have readable content for screen readers
- Use aria-busy="true" on parent containers during loading states