AI CSS Animations

Agent Tool Call Card

A tool call card reading Bash npm test: a live dot pings while a timer counts up, then a check pops in and the line settles on 42 passed. The timer is an animated @property integer.

Also known as: ai agent loading animation, tool call ui, running command animation.

Bash npm test Running 42 tests 42 passed, 0 failed

HTML

<div class="aia-agent-tool-call" role="status" aria-label="Running npm test">
  <span class="aia-agent-tool-call-icon" aria-hidden="true">
    <span class="aia-agent-tool-call-live"></span>
    <svg class="aia-agent-tool-call-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5.5 12.5 4 4 9-9.5"/></svg>
  </span>
  <span class="aia-agent-tool-call-text">
    <span class="aia-agent-tool-call-title">Bash <code>npm test</code></span>
    <span class="aia-agent-tool-call-sub">
      <span class="aia-agent-tool-call-run">Running 42 tests</span>
      <span class="aia-agent-tool-call-ok">42 passed, 0 failed</span>
    </span>
  </span>
  <span class="aia-agent-tool-call-time" aria-hidden="true"></span>
  <span class="aia-agent-tool-call-bar" aria-hidden="true"></span>
</div>

CSS

@property --aia-agent-tool-call-ds {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --aia-agent-tool-call-s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --aia-agent-tool-call-r {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-agent-tool-call {
  --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;
  position: relative;
  box-sizing: border-box;
  padding: 0.9em 1em;
  border-radius: 0.9em;
  background: color-mix(in srgb, currentColor 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent), 0 0.1em 0.2em color-mix(in srgb, currentColor 4%, transparent), 0 0.9em 2em -1.1em rgb(0 0 0 / 0.3);
  --d: 5.4s;
  --ok: color-mix(in srgb, #16a34a 78%, currentColor);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8em;
  width: 21em;
  overflow: hidden;
}
.aia-agent-tool-call-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 0.6em;
  color: var(--ok);
  animation: aia-agent-tool-call-well var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-agent-tool-call-icon > * {
  grid-area: 1 / 1;
}
.aia-agent-tool-call-live {
  position: relative;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--c);
  animation: aia-agent-tool-call-out var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-agent-tool-call-live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  animation: aia-agent-tool-call-ping 1.35s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.aia-agent-tool-call-check {
  width: 1.2em;
  height: 1.2em;
  stroke-width: 2.6;
  stroke-dasharray: 22;
  animation: aia-agent-tool-call-in var(--d) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.aia-agent-tool-call-text {
  display: grid;
  gap: 0.2em;
  min-width: 0;
}
.aia-agent-tool-call-title {
  font-weight: 600;
  font-size: 0.95em;
}
.aia-agent-tool-call-title code {
  margin-left: 0.3em;
  padding: 0.1em 0.4em;
  border-radius: 0.35em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  font: 500 0.92em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-agent-tool-call-sub {
  display: grid;
  font-size: 0.85em;
}
.aia-agent-tool-call-sub > * {
  grid-area: 1 / 1;
}
.aia-agent-tool-call-run {
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 50%, transparent) 35%, currentColor 50%, color-mix(in srgb, currentColor 50%, transparent) 65%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    aia-agent-tool-call-shine 1.8s linear infinite,
    aia-agent-tool-call-swap-out var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-agent-tool-call-ok {
  color: var(--ok);
  font-weight: 500;
  animation: aia-agent-tool-call-swap-in var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-agent-tool-call-time {
  align-self: start;
  color: color-mix(in srgb, currentColor 50%, transparent);
  font: 500 0.8em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  --aia-agent-tool-call-s: calc(var(--aia-agent-tool-call-ds) / 10 - 0.5);
  --aia-agent-tool-call-r: calc(var(--aia-agent-tool-call-ds) - var(--aia-agent-tool-call-s) * 10);
  counter-reset: s var(--aia-agent-tool-call-s) r var(--aia-agent-tool-call-r);
  animation: aia-agent-tool-call-clock var(--d) linear infinite;
}
.aia-agent-tool-call-time::before {
  content: counter(s) "." counter(r) "s";
}
.aia-agent-tool-call-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.14em;
  overflow: hidden;
  animation: aia-agent-tool-call-out var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aia-agent-tool-call-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  animation: aia-agent-tool-call-sweep 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes aia-agent-tool-call-well {
  0%, 58%, 100% { background: color-mix(in srgb, var(--c) 12%, transparent); }
  64%, 92% { background: color-mix(in srgb, #16a34a 14%, transparent); }
}
@keyframes aia-agent-tool-call-out {
  0%, 58% { opacity: 1; transform: none; }
  63%, 93% { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: none; }
}
@keyframes aia-agent-tool-call-in {
  0%, 59% { opacity: 0; stroke-dashoffset: 22; transform: scale(0.5); }
  68% { opacity: 1; stroke-dashoffset: 0; transform: scale(1.12); }
  73%, 91% { opacity: 1; stroke-dashoffset: 0; transform: scale(1); }
  97%, 100% { opacity: 0; stroke-dashoffset: 0; transform: scale(0.8); }
}
@keyframes aia-agent-tool-call-ping {
  0% { opacity: 0.55; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(3); }
}
@keyframes aia-agent-tool-call-shine {
  from { background-position: 100% 0; }
  to { background-position: -50% 0; }
}
@keyframes aia-agent-tool-call-swap-out {
  0%, 58% { opacity: 1; transform: none; }
  63% { opacity: 0; transform: translateY(-0.6em); }
  93% { opacity: 0; transform: translateY(0.6em); }
  100% { opacity: 1; transform: none; }
}
@keyframes aia-agent-tool-call-swap-in {
  0%, 59% { opacity: 0; transform: translateY(0.6em); }
  65%, 91% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(-0.6em); }
}
@keyframes aia-agent-tool-call-clock {
  0% { --aia-agent-tool-call-ds: 0; }
  60%, 96% { --aia-agent-tool-call-ds: 31; }
  100% { --aia-agent-tool-call-ds: 0; }
}
@keyframes aia-agent-tool-call-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-agent-tool-call-icon,
  .aia-agent-tool-call-icon *,
  .aia-agent-tool-call-run,
  .aia-agent-tool-call-ok,
  .aia-agent-tool-call-time,
  .aia-agent-tool-call-bar,
  .aia-agent-tool-call-bar::before {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.8);
  }
  .aia-agent-tool-call-live::after { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aia-agent-tool-call, .aia-agent-tool-call *, .aia-agent-tool-call::before, .aia-agent-tool-call::after, .aia-agent-tool-call *::before, .aia-agent-tool-call *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --aia-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --aia-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. 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.

Similar ai animations

Agent Terminal Output
Agent File Edit Diff
Agent Plan Checklist
Agent Waiting for Approval