Docs
Typing Indicator
Typing Indicator
A simple animated typing indicator component.
A minimal and elegant typing indicator component that shows three animated dots to indicate ongoing activity, commonly used in chat interfaces to show when someone is typing.
Installation
Usage
Examples
In a Chat Interface
Custom Background
Styling
The component uses the following CSS classes that can be customized:
bg-muted
: Background color of the indicator containeranimate-typing-dot-bounce
: Animation for the bouncing dots[animation-delay:90ms]
: Delay for the second dot[animation-delay:180ms]
: Delay for the third dot
You can override these classes by wrapping the component and applying your own styles:
Accessibility
The typing indicator is purely decorative and does not require any accessibility annotations. However, if you're using it in a chat interface, you should ensure that the typing state is properly announced to screen readers through appropriate ARIA live regions in your chat component.
Design Considerations
- The component uses three dots with staggered animations to create a natural typing effect
- The animation is subtle and not distracting
- The component uses the muted background color from your theme for better integration
- The dots are spaced appropriately for optimal visual rhythm