Thinking State
A loading indicator with message cycling for AI applications.
Installation
- Install the component:
Note: This component uses the Motion library for animations. It will be automatically installed as a dependency when using the command above but you can also install it manually with:
Animation Variants
Pulse (Default)
Simple pulsing dots for a subtle indication.
Pulse Variant (Default)
Thinking...
Dots
Bouncing dots for a more playful animation.
Dots Variant
Loading data...
Wave
Elegant audio waveform style animation.
Wave Variant
Generating response...
Bounce
Single bouncing element for a minimal aesthetic.
Bounce Variant
Please wait...
Customization
Color Schemes
Color Schemes
Thinking...
Thinking...
Thinking...
Thinking...
Thinking...
Thinking...
Size Variants
Size Variants
Thinking...
Thinking...
Thinking...
Advanced Features
Dynamic Messages
Dynamic Messages
Step NaN/3: Processing...
Completion State
Completion State
Processing...
Thinking...
Chat Integration
Chat Integration
Hello! How can I help you today?
Can you analyze this data and create a visualization?
Reading data...
Props
| Prop | Type | Default |
|---|---|---|
messages? | (string | ((index: number) => string) | React.ReactNode)[] | ["Thinking...", "Processing...", "Almost there..."] |
variant? | "pulse" | "dots" | "wave" | "bounce" | "pulse" |
size? | "sm" | "md" | "lg" | "md" |
colorScheme? | "default" | "blue" | "purple" | "green" | "amber" | "rose" | "default" |
mode? | "random" | "sequential" | "sequential" |
interval? | number | 2000 |
isComplete? | boolean | false |
completionMessage? | string | ((index: number) => string) | React.ReactNode | "Done!" |
animationClassName? | string | - |
messageClassName? | string | - |
ariaLabel? | string | "Loading indicator" |