Documentation
Typing Indicator
Animated bouncing dots component indicating AI is processing or thinking.
Installation
1import { TypingIndicatorComponent } from '@angular-ai-kit/core';Configuration
AI is thinking...
Show Background
Animation
Show Avatar
Show Text
Dot Count: 3
API Reference
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
showBackground | boolean | true | Show card background with border |
animation | 'shimmer' | 'wave' | 'shimmer' | Animation style: shimmer (bounce) or wave (up/down) |
showAvatar | boolean | true | Show AI avatar next to dots |
text | string | '' | Optional text message (e.g., "Thinking...") |
dotCount | number | 3 | Number of animated dots (2-5) |
customClasses | string | '' | Additional CSS classes |
Usage Example
1<ai-typing-indicator2 [showBackground]="true"3 animation="wave"4 [showAvatar]="true"5 [text]="'Thinking...'"6 [dotCount]="3"7/>Accessibility
- Uses role="status" for screen reader announcements
- Includes aria-label for "AI is typing"
- Hidden text "AI is thinking..." for screen readers via sr-only class
- Respects prefers-reduced-motion media query