Typing Dots
An animated typing indicator with customizable size and color variants.
Preview
Installation
Usage
Examples
Sizes
Small
Medium
Large
Variants
Primary
Secondary
Destructive
In Chat Message
AI
Custom Color with className
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Size of the dots |
variant | 'primary' | 'secondary' | 'destructive' | - | Color variant (uses current color if not specified) |
className | string | - | Additional CSS classes |
Animation
The component uses CSS animations with staggered delays:
- First dot: 0ms delay
- Second dot: 150ms delay
- Third dot: 300ms delay
- Animation duration: 1000ms (1 second)