ThinkingIndicator | Fragments

Preview

<ThinkingIndicator kind="dots" label="Thinking..." />

Installation

npx @usefragments/cli add thinkingindicator

Writes src/fragments/ui/components/ThinkingIndicator plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Anatomy

ThinkingIndicator is a compound: import the root and reach its parts through dot notation.

ThinkingIndicator.Steps
ThinkingIndicator.Step

Examples

Pulse

A single ring breathes in place.

<ThinkingIndicator kind="pulse" label="Processing..." />

Spinner

A rotating arc, for work with a definite end.

<ThinkingIndicator kind="spinner" label="Loading..." />

With Elapsed Time

A live counter reassures the reader during long waits.

<ThinkingIndicator
  kind="dots"
  label="Generating response..."
  showElapsed
/>

Multi-Step Progress

Finished, running, and queued stages read at a glance.

<ThinkingIndicator
  kind="spinner"
  label="Working..."
  steps={[
    { id: '1', label: 'Analyzing request', status: 'complete' },
    { id: '2', label: 'Searching knowledge base', status: 'pending' },

With Error Step

A failed stage turns red while the next one retries.

<ThinkingIndicator
  kind="spinner"
  label="Retrying..."
  steps={[
    { id: '1', label: 'Connecting to API', status: 'complete' },
    { id: '2', label: 'Fetching data', status: 'error' },

Custom Label

Name the actual task instead of a generic status.

<ThinkingIndicator
  kind="dots"
  label="Claude is writing code..."
/>

API

Component props
Prop	Type	Default	Description
`active`	`boolean`	`true`	Whether thinking is active
`label`	`string`	`Thinking...`	Status text
`kind`	`enumdotspulsespinner`	`dots`	Animation style
`showElapsed`	`boolean`	`false`	Show elapsed time
`steps`	`array`	Not set	Multi-step progress array

Accessibility

Uses role="status" and aria-live="polite"
Provides aria-label for screen readers
Animations respect prefers-reduced-motion
Elapsed time uses tabular numbers for stability

Guidance

Use when

A model is working on a request
Async AI work that would otherwise look frozen
Multi-stage tasks worth showing stage by stage
The moment before streaming starts

Avoid when

Ordinary loading (use Progress or Skeleton)
Form submission (use the Button loading state)
Whole-page loading (use Progress or Skeleton)

MessagesiblingShow ThinkingIndicator while waiting for assistant message
ConversationListparentTypically placed at bottom of ConversationList
ProgressalternativeUse Progress for determinate progress

Next steps

Accessibility contractThe keyboard, focus and naming rules every component carries.
Every componentThe catalog, grouped by what each component does.