AI Components / Thinking
Thinking
AI loading indicator with 3 variants (dots, spinner, skeleton), stages, tool indicators, cancel button, progress bar.
ai-display v0.1.0
Playground
Examples
Shimmer (inline)
<ai-thinking variant="shimmer" text="Thinking..." delay="0"></ai-thinking>Shimmer + stages
<ai-thinking variant="shimmer" delay="0"></ai-thinking>Dots
<ai-thinking text="Analyzing data" delay="0"></ai-thinking>Dots + stages
<ai-thinking delay="0"></ai-thinking>Spinner
<ai-thinking variant="spinner" text="Processing" delay="0"></ai-thinking>Skeleton
<ai-thinking variant="skeleton" delay="0"></ai-thinking>With cancel + progress
<ai-thinking text="Generating report" cancelable progress="65" delay="0"></ai-thinking>Import
import { AiThinking } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-thinking';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "Thinking" | Display text |
variant | "dots" | "spinner" | "skeleton" | "shimmer" | "dots" | Visual variant |
size | "sm" | "md" | "lg" | "md" | Size |
shimmer | boolean | false | Shimmer text effect |
stages | string[] | — | Cycling status messages |
cancelable | boolean | false | Show cancel button |
tools | ToolCall[] | — | Tool call indicators |
progress | number | -1 | Progress bar (0-100, -1=hidden) |
Events
| Event | Detail | Description |
|---|---|---|
ai-thinking-cancel | {} | Cancel clicked |
ai-thinking-stage-change | {stage, index} | Stage changed |