Thinking Loader
The status pill of an AI that is working: a ray spinner and a shimmering label ("Thinking", "Searching the web", "Writing response").
The spinner is drawn in the ember gradient and beats once per shimmer lap, just as the pale band is about to enter the label again, as if it pushed the band out. Change label as the work moves on: the old text fades out, the new one fades in with a soft blur, and the pill grows or shrinks to fit. It is a role="status", so each new label is announced politely.
Basic
Thinking
Searching the web
Changing label
Pick the label from what your model is doing. This one cycles.
Thinking
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | 'Thinking' | What it is doing. Changing it crossfades the text and resizes the pill. |
| className | string | Extra class on the pill. |