Typing Indicator
<mcp-typing-indicator>Animated indicator showing the AI assistant is processing or generating a response.
AIWeb Component
Overview
Animated indicator showing the AI assistant is processing or generating a response.
Preview
Preview
Loading components...
Import
javascript
// Import all components (recommended)
import '@mcpsystem/ui';
// Or import the class for TypeScript
import { McpTypingIndicator } from '@mcpsystem/ui';Basic Usage
html
<mcp-typing-indicator></mcp-typing-indicator>API Reference
Properties(3)
| Property | Attribute | Type |
|---|---|---|
size | size | 'sm' | 'md' | 'lg' |
variant | variant | 'bubble' | 'minimal' |
label | label | string |
CSS Parts(2)
Style internal elements using ::part() selector.
| Part | Description |
|---|---|
::part(container) | The indicator container |
::part(dot) | Individual animated dots |
CSS Custom Properties(4)
Customize appearance by setting these CSS variables.
| Property | Description |
|---|---|
--mcp-typing-dot-color | Dot color |
--mcp-typing-dot-size | Dot size |
--mcp-typing-gap | Gap between dots |
--mcp-typing-bg | Background color for bubble variant |
Examples
Basic Usage
Preview
Loading components...
html
<mcp-typing-indicator></mcp-typing-indicator>Minimal Variant
Preview
Loading components...
html
<mcp-typing-indicator variant="minimal" size="sm"></mcp-typing-indicator>