Thinking Indicator
Animated indicator showing that an AI is processing. Features multiple animation styles and customizable text. Perfect for chat interfaces to show that the assistant is typing or thinking.
Preview
Thinking...
Processing...
Analyzing your request...
Thinking...
Installation
Terminalbash
Usage
Reacttsx
Examples
Dots Variant
tsx
With Custom Text
Thinking...
Processing...
Analyzing your request...
tsx
Sizes
Small size
Default size
Large size
tsx
In Context
AI
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'dots' | 'pulse' | 'wave' | 'typing' | 'dots' | Visual animation style (default, dots, or pulse) |
size | 'sm' | 'default' | 'lg' | 'default' | |
message | string | — |
Accessibility
ARIA Live Region
The component uses aria-live="polite" to announce status changes to screen readers without interrupting the user.
Visual Animation
Multiple animation variants provide clear visual feedback that processing is ongoing.
RTL Support
The thinking indicator works seamlessly in both LTR and RTL layouts. Animations remain centered and text direction adapts automatically.
Left-to-Right (LTR)
Thinking...
Right-to-Left (RTL)
Related Components
Chat Message
Display chat messages
Prompt Input
Input component for chat