Agent Status Pill
A compact pill for one agent that cycles Idle, Working, Needs input and Done. The state color is an animated @property color, the label rolls with a springy overshoot and the chip resizes to fit.
Also known as: agent status indicator, status badge animation, ai agent status.
auth-refactor
IdleWorkingNeeds inputDone
HTML
<div class="aia-agent-status-pill" role="status" aria-label="Agent status">
<span class="aia-agent-status-pill-avatar" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3.5l1.9 5.1 5.1 1.9-5.1 1.9L12 17.5l-1.9-5.1L5 10.5l5.1-1.9z"/></svg></span>
<span class="aia-agent-status-pill-name">auth-refactor</span>
<span class="aia-agent-status-pill-chip">
<span class="aia-agent-status-pill-dot" aria-hidden="true"></span>
<span class="aia-agent-status-pill-view">
<span class="aia-agent-status-pill-roll">
<span>Idle</span><span>Working</span><span>Needs input</span><span>Done</span><span aria-hidden="true">Idle</span>
</span>
</span>
</span>
</div>CSS
@property --aia-agent-status-pill-k {
syntax: "<color>";
inherits: true;
initial-value: #8b8b94;
}
.aia-agent-status-pill {
--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;
--d: 9s;
--k: var(--aia-agent-status-pill-k);
display: inline-flex;
align-items: center;
gap: 0.55em;
padding: 0.3em 0.35em 0.3em 0.3em;
border-radius: 999em;
background: color-mix(in srgb, currentColor 3%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent), 0 0.6em 1.4em -0.9em rgb(0 0 0 / 0.3);
animation: aia-agent-status-pill-color var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-agent-status-pill-avatar {
display: grid;
place-items: center;
width: 1.9em;
height: 1.9em;
border-radius: 50%;
background: color-mix(in srgb, var(--c) 14%, transparent);
color: var(--c);
}
.aia-agent-status-pill-avatar svg {
width: 1.05em;
height: 1.05em;
fill: currentColor;
stroke: none;
}
.aia-agent-status-pill-name {
font: 500 0.85em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-agent-status-pill-chip {
display: inline-flex;
align-items: center;
gap: 0.45em;
height: 1.9em;
padding: 0 0.75em 0 0.65em;
border-radius: 999em;
background: color-mix(in srgb, var(--k) 13%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 30%, transparent);
color: color-mix(in srgb, var(--k) 80%, currentColor);
font-size: 0.85em;
font-weight: 600;
}
.aia-agent-status-pill-dot {
position: relative;
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: var(--k);
}
.aia-agent-status-pill-dot::before {
content: "";
position: absolute;
inset: -0.3em;
border-radius: 50%;
border: 0.12em solid transparent;
border-top-color: var(--k);
animation:
aia-agent-status-pill-spin 0.9s linear infinite,
aia-agent-status-pill-working var(--d) linear infinite;
}
.aia-agent-status-pill-dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--k);
animation:
aia-agent-status-pill-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite,
aia-agent-status-pill-waiting var(--d) linear infinite;
}
.aia-agent-status-pill-view {
height: 1.4em;
overflow: hidden;
animation: aia-agent-status-pill-width var(--d) cubic-bezier(0.3, 1.3, 0.5, 1) infinite;
}
.aia-agent-status-pill-roll {
display: grid;
animation: aia-agent-status-pill-roll var(--d) cubic-bezier(0.34, 1.45, 0.64, 1) infinite;
}
.aia-agent-status-pill-roll span {
height: 1.4em;
line-height: 1.4em;
white-space: nowrap;
}
@keyframes aia-agent-status-pill-color {
0%, 21%, 100% { --aia-agent-status-pill-k: #8b8b94; }
25%, 46% { --aia-agent-status-pill-k: var(--c); }
50%, 71% { --aia-agent-status-pill-k: #f59e0b; }
75%, 96% { --aia-agent-status-pill-k: #22c55e; }
}
@keyframes aia-agent-status-pill-roll {
0%, 21% { transform: translateY(0); }
25%, 46% { transform: translateY(-1.4em); }
50%, 71% { transform: translateY(-2.8em); }
75%, 96% { transform: translateY(-4.2em); }
100% { transform: translateY(-5.6em); }
}
@keyframes aia-agent-status-pill-width {
0%, 21%, 100% { width: 1.8em; }
25%, 46% { width: 4.1em; }
50%, 71% { width: 6em; }
75%, 96% { width: 2.65em; }
}
@keyframes aia-agent-status-pill-working {
0%, 23%, 48%, 100% { opacity: 0; }
26%, 45% { opacity: 1; }
}
@keyframes aia-agent-status-pill-waiting {
0%, 48%, 73%, 100% { visibility: hidden; }
50%, 71% { visibility: visible; }
}
@keyframes aia-agent-status-pill-spin {
to { transform: rotate(360deg); }
}
@keyframes aia-agent-status-pill-ping {
0% { opacity: 0.6; transform: scale(1); }
70%, 100% { opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
.aia-agent-status-pill,
.aia-agent-status-pill-view,
.aia-agent-status-pill-roll,
.aia-agent-status-pill-dot::before,
.aia-agent-status-pill-dot::after {
animation-play-state: paused;
animation-delay: calc(var(--d) * -0.35);
}
}
@media (prefers-reduced-motion: reduce) {
.aia-agent-status-pill, .aia-agent-status-pill *, .aia-agent-status-pill::before, .aia-agent-status-pill::after, .aia-agent-status-pill *::before, .aia-agent-status-pill *::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.