Thinking Indicator
View on StorybookStorybookAnimated 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)
Use Cases
AI response generation feedback
Long processing state indication
Typing indicators in chat
Search result computation feedback
Best Practices
Do
- ✓ Show immediately when processing starts
- ✓ Animate to convey activity
- ✓ Include an accessible label (aria-label)
Don't
- ✗ Don't keep showing after response arrives
- ✗ Don't use for instant operations
- ✗ Don't block the UI while showing the indicator