ThinkingIndicator

Animated dots with a label used to signal that an AI model is processing or loading.

Thinking…

import { ThinkingIndicator } from "@aetherstack/ui"

Installation

terminal

npx aether-ui add thinking-indicator

Import

import.tsx

import { ThinkingIndicator } from "@aetherstack/ui"

Usage

thinkingindicator.tsx

<ThinkingIndicator />

{/* Custom label */}
<ThinkingIndicator label="Processing…" />

{/* Loading state */}
<ThinkingIndicator state="loading" label="Loading response…" />

Props

Prop	Type	Default	Description
state	"thinking" \| "loading"	"thinking"	Controls animation style — thinking shows pulsing dots, loading shows a spinner.
label	string	"Thinking…"	Text label shown beside the animation.
className	string	—	Additional CSS classes.

* Required

Accessibility

→The container has role="status" and aria-live="polite" so screen readers announce the thinking state.
→Label text is always visible — do not rely on the animation alone to convey meaning.