MVP / agentic
thinking indicator
A compact status affordance for incremental agent work, with a restrained looping indicator.
Specimen
A compact status affordance for incremental agent work, with a restrained looping indicator. Copy Preview, Code, or Install from the tabs. The raw file and standalone fixture remain below.
Preview
Remove the indicator when a concrete result replaces the waiting state. Motion stops under prefers-reduced-motion.
Code
<style>
.au-thinking-indicator {
align-items: center;
color: var(--au-fg-muted);
display: inline-flex;
font-size: 12px;
gap: 8px;
}
.au-thinking-indicator__label {
color: var(--au-fg-muted);
font-family: var(--au-font-mono);
font-size: 12px;
font-variant-numeric: tabular-nums;
line-height: 1.4;
}
.au-thinking-indicator[hidden] {
display: none;
}
.au-thinking-indicator__dots {
display: inline-flex;
gap: 4px;
}
.au-thinking-indicator__dots span {
animation: au-thinking-pulse 1.2s var(--au-ease) infinite;
background: var(--au-action);
border-radius: 50%;
height: 4px;
opacity: 0.45;
width: 4px;
}
.au-thinking-indicator__dots span:nth-child(2) {
animation-delay: 120ms;
}
.au-thinking-indicator__dots span:nth-child(3) {
animation-delay: 240ms;
}
@keyframes au-thinking-pulse {
0%,
60%,
100% {
opacity: 0.35;
transform: translateY(0);
}
30% {
opacity: 1;
transform: translateY(-2px);
}
}
@media (prefers-reduced-motion: reduce) {
.au-thinking-indicator__dots span {
animation: none;
opacity: 0.8;
}
}
</style>
<div class="au-thinking-indicator" role="status" aria-live="polite"><span class="au-thinking-indicator__dots" aria-hidden="true"><span></span><span></span><span></span></span><span class="au-thinking-indicator__label">Agent is thinking</span></div>Install
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/thinking-indicator/thinking-indicator.css">Component contract
- Dependencies
tokens.css,thinking-indicator.css.- States
- running and streaming. The indicator should leave when a concrete result, error, or cancellation is available.
- CSS variables
- No component-specific variables. Dots use the shared action token; motion uses opacity and transform only, and stops under `prefers-reduced-motion`.
- Events
- Native form, focus, and click events. No custom event or runtime is required.
- No JavaScript
- The text label remains visible and understandable without the animation or any script.
- Host boundary
- The host decides when work begins, when a result is concrete, and whether an error or cancellation replaces the indicator.
Accessibility and security
Accessibility: Use `role=status` and `aria-live=polite`; the dots are decorative and the text carries the meaning. Security: The indicator does not imply authorization, success, or execution. Pair it with the object currently being worked on.
Source files
The page is documentation, not a package boundary. Copy the raw files and edit them in your application.