LoadingIndicator
Streaming/typing feedback with three motion variants — dots, pulse, bar.
Variants — animation style
Loading
dotsLoading
pulseLoading
barSizes
Loading
smLoading
mdInline — beside streaming copy
Assistant is thinking…
Installation
pnpm
pnpm dlx @hex-core/cli add loading-indicatorVariant values
variantMotion style.| Value | Description |
|---|---|
dotsdefault | Three bouncing dots — classic typing indicator. |
pulse | Single throbbing circle — minimal. |
bar | Horizontal sweep — implies progress without claiming a percentage. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "dots" | "pulse" | "bar" | dots | Animation style. |
size | "sm" | "md" | md | Text/icon scale. |
label | string | — | Optional adjacent text label (e.g. "Thinking…"). |
className | string | — | Additional CSS classes. |
AI Guidance
When to use
Show during the gap between submitting a prompt and the first streamed token, or while a long-running tool call is in flight.
When not to use
Don't use for known-percent progress (use Progress). Don't keep visible after the first token streams in — stream itself signals activity.
Common mistakes
- Leaving the indicator visible while content streams — overlap looks broken
- Using `bar` for sub-second waits — the sweep can't complete a cycle
Accessibility
Renders as `role="status"` with `aria-live="polite"` and an `aria-label`. Pass a meaningful label so screen readers announce "Searching docs" rather than the default "Loading".
Token budget: 200
Verified against @hex-core/components@1.12.0