Thinking Indicator
Loading indicator for AI responses with multiple variants (typing, pulse, dots). Perfect for showing loading states in chat interfaces with smooth animations.
Preview
Thinking
Processing
Analyzing
AI is responding
Installation
Terminalbash
Usage
Reacttsx
Examples
Animation Variants
tsx
With Custom Message
AI is thinking...
Processing your request
Analyzing data
tsx
Sizes
Small size
Default size
Large size
tsx
In Chat Context
AI
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'dots' | 'pulse' | 'wave' | 'typing' | 'dots' | Visual style variant of the animation |
size | 'sm' | 'default' | 'lg' | 'default' | Size of the indicator |
message | string | — | Custom message to display (overrides default from i18n) |
Accessibility
Screen Reader
The component includes proper ARIA attributes with role="status" and aria-live="polite" to announce loading states to screen readers without interrupting other content.
Animation Safety
All animations respect the user's motion preferences. Animations are subtle and don't flash rapidly, making them safe for users with motion sensitivity.
RTL Considerations
The indicator works seamlessly in RTL layouts. The message is automatically translated based on the current locale from the DirectionProvider and i18n system.
LTR (English)
AI is thinking...
RTL (العربية)
Related Components
Chat Message
Display chat messages from users and AI
Prompt Input
Input component for sending messages
Message Actions
Action buttons for chat messages