Terminal Thinking Status Line
A coding agent's terminal status line: a dingbat star cycles through its frames, a brighter wave runs through the word Percolating, and an elapsed seconds counter ticks up from a registered integer.
Also known as: claude code thinking animation, cli spinner animation, terminal ai spinner, coding agent status line.
> fix the flaky auth test
Percolating…
HTML
<div class="aia-terminal-thinking" role="status" aria-label="Thinking">
<p class="aia-terminal-thinking-prompt"><span>></span> fix the flaky auth test</p>
<p class="aia-terminal-thinking-line">
<span class="aia-terminal-thinking-glyph" aria-hidden="true"><span class="aia-terminal-thinking-strip"><i>·</i><i>✢</i><i>✳</i><i>✶</i><i>✻</i><i>✽</i><i>✻</i><i>✶</i><i>✳</i><i>✢</i></span></span>
<span class="aia-terminal-thinking-word"><i style="--i: 0">P</i><i style="--i: 1">e</i><i style="--i: 2">r</i><i style="--i: 3">c</i><i style="--i: 4">o</i><i style="--i: 5">l</i><i style="--i: 6">a</i><i style="--i: 7">t</i><i style="--i: 8">i</i><i style="--i: 9">n</i><i style="--i: 10">g</i><i style="--i: 11">…</i></span>
<span class="aia-terminal-thinking-meta">(<span class="aia-terminal-thinking-secs"></span> · esc to interrupt)</span>
</p>
</div>CSS
@property --aia-terminal-thinking-s {
syntax: "<integer>";
inherits: true;
initial-value: 0;
}
.aia-terminal-thinking {
--c: var(--aia-color, #7c5cff);
font-size: var(--aia-size, 16px);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.4;
width: 25em;
max-width: 100%;
padding: 1em 1.15em;
border: 1px solid rgb(255 255 255 / 0.12);
border-radius: 0.8em;
background: #0e0e10;
box-shadow: 0 0.7em 1.8em -0.7em rgb(0 0 0 / 0.45);
color: #d4d4d8;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: calc(var(--aia-size, 16px) * 0.95);
animation: aia-terminal-thinking-count 12s linear infinite;
}
.aia-terminal-thinking-prompt,
.aia-terminal-thinking-line {
margin: 0;
white-space: nowrap;
}
.aia-terminal-thinking-prompt {
color: #8b8b93;
}
.aia-terminal-thinking-prompt span {
color: var(--c);
}
.aia-terminal-thinking-line {
display: flex;
align-items: center;
gap: 0.6em;
margin-top: 0.8em;
animation: aia-terminal-thinking-fade 12s linear infinite;
}
.aia-terminal-thinking-glyph {
display: inline-block;
width: 1.2em;
height: 1.4em;
overflow: hidden;
color: color-mix(in srgb, var(--c) 75%, #fff);
}
.aia-terminal-thinking-strip {
display: block;
animation: aia-terminal-thinking-frames 1.3s steps(10) infinite;
}
.aia-terminal-thinking-strip i {
display: block;
height: 1.4em;
line-height: 1.4em;
text-align: center;
font-style: normal;
}
.aia-terminal-thinking-word i {
font-style: normal;
color: color-mix(in srgb, var(--c) 80%, #fff);
animation: aia-terminal-thinking-wave 2.2s linear infinite;
animation-delay: calc(var(--i) * 0.07s);
}
.aia-terminal-thinking-meta {
color: #71717a;
}
.aia-terminal-thinking-secs {
counter-reset: aia-terminal-thinking-s var(--aia-terminal-thinking-s);
}
.aia-terminal-thinking-secs::before {
content: counter(aia-terminal-thinking-s) "s";
}
@keyframes aia-terminal-thinking-count {
from { --aia-terminal-thinking-s: 0; }
to { --aia-terminal-thinking-s: 12; }
}
@keyframes aia-terminal-thinking-fade {
0% { opacity: 0; }
3%, 95% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes aia-terminal-thinking-frames {
to { transform: translateY(-14em); }
}
@keyframes aia-terminal-thinking-wave {
0%, 30%, 100% { color: color-mix(in srgb, var(--c) 80%, #fff); }
12% { color: color-mix(in srgb, var(--c) 25%, #fff); }
}
@media (prefers-reduced-motion: reduce) {
.aia-terminal-thinking,
.aia-terminal-thinking-line,
.aia-terminal-thinking-strip,
.aia-terminal-thinking-word i { animation: none; }
.aia-terminal-thinking { --aia-terminal-thinking-s: 12; }
}
@media (prefers-reduced-motion: reduce) {
.aia-terminal-thinking, .aia-terminal-thinking *, .aia-terminal-thinking::before, .aia-terminal-thinking::after, .aia-terminal-thinking *::before, .aia-terminal-thinking *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.