AI CSS Animations

Parallel Tool Calls

Three tool calls fire at once, Read, Grep and WebFetch, each lane filling at its own pace. They land at different moments with a check and a time, and the counter climbs to 3/3 done.

Also known as: parallel tool use animation, concurrent api calls ui, multiple tool calls loading.

3 tool calls in parallel
  • Readsrc/app/routes.ts
  • Grep"useSession" src/
  • WebFetchnextjs.org/docs/app/auth

HTML

<div class="aia-parallel-tool-calls" role="status" aria-label="Running three tool calls in parallel">
  <div class="aia-parallel-tool-calls-head">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 3 5 13.5h6.5L10.5 21 19 10.5h-6.5z"/></svg>
    <span>3 tool calls in parallel</span>
    <span class="aia-parallel-tool-calls-count" aria-hidden="true"></span>
  </div>
  <ul class="aia-parallel-tool-calls-list">
    <li><i 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="m5.5 12.5 4 4 9-9.5"/></svg></i><b>Read</b><code>src/app/routes.ts</code><em aria-hidden="true">0.4s</em></li>
    <li><i 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="m5.5 12.5 4 4 9-9.5"/></svg></i><b>Grep</b><code>"useSession" src/</code><em aria-hidden="true">1.2s</em></li>
    <li><i 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="m5.5 12.5 4 4 9-9.5"/></svg></i><b>WebFetch</b><code>nextjs.org/docs/app/auth</code><em aria-hidden="true">3.1s</em></li>
  </ul>
</div>

CSS

@property --aia-parallel-tool-calls-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-parallel-tool-calls-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-parallel-tool-calls {
  --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: 7s;
  --t: var(--aia-parallel-tool-calls-t);
  --ok: color-mix(in srgb, #16a34a 78%, currentColor);
  width: 22em;
  padding: 0.8em 0.85em 0.85em;
  animation: aia-parallel-tool-calls-clock var(--d) linear infinite;
}
.aia-parallel-tool-calls-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin: 0 0.15em 0.65em;
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-size: 0.8em;
  font-weight: 600;
}
.aia-parallel-tool-calls-head svg {
  width: 1.15em;
  height: 1.15em;
  color: var(--c);
}
.aia-parallel-tool-calls-count {
  margin-left: auto;
  padding: 0.12em 0.55em;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: color-mix(in srgb, currentColor 70%, transparent);
  font: 600 0.92em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --aia-parallel-tool-calls-n: calc(clamp(0, (var(--t) - 0.15) * 30, 1) + clamp(0, (var(--t) - 0.42) * 30, 1) + clamp(0, (var(--t) - 1) * 30, 1));
  counter-reset: n var(--aia-parallel-tool-calls-n);
  animation: aia-parallel-tool-calls-fade var(--d) linear infinite;
}
.aia-parallel-tool-calls-count::before { content: counter(n) "/3 done"; }
.aia-parallel-tool-calls-list {
  display: grid;
  gap: 0.4em;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: aia-parallel-tool-calls-fade var(--d) linear infinite;
}
.aia-parallel-tool-calls-list li {
  --e: 0.15;
  --p: clamp(0, var(--t) / var(--e), 1);
  --k: clamp(0, (var(--t) - var(--e)) * 30, 1);
  position: relative;
  display: grid;
  grid-template-columns: 1em auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6em;
  height: 2.2em;
  padding: 0 0.75em;
  overflow: hidden;
  border-radius: 0.55em;
  background: color-mix(in srgb, currentColor 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
  font-size: 0.85em;
}
.aia-parallel-tool-calls-list li:nth-child(2) { --e: 0.42; }
.aia-parallel-tool-calls-list li:nth-child(3) { --e: 1; }
/* the lane filling at its own pace, with a bright leading edge */
.aia-parallel-tool-calls-list li::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 7%, transparent), color-mix(in srgb, var(--c) 18%, transparent) calc(100% - 0.2em), var(--c) calc(100% - 0.2em));
  transform: scaleX(var(--p));
  transform-origin: left;
  opacity: calc(1 - var(--k));
}
.aia-parallel-tool-calls-list li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #16a34a 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #16a34a 26%, transparent);
  border-radius: inherit;
  opacity: var(--k);
}
.aia-parallel-tool-calls-list li > * {
  position: relative;
  z-index: 1;
}
.aia-parallel-tool-calls-list i {
  display: grid;
  place-items: center;
  width: 1em;
  height: 1em;
}
.aia-parallel-tool-calls-list i::before {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.13em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  opacity: calc(1 - var(--k));
  animation: aia-parallel-tool-calls-spin 0.75s linear infinite;
}
.aia-parallel-tool-calls-list svg {
  grid-area: 1 / 1;
  width: 1.05em;
  height: 1.05em;
  color: var(--ok);
  stroke-width: 3;
  opacity: var(--k);
  transform: scale(calc(0.3 + var(--k) * 0.7));
}
.aia-parallel-tool-calls-list b { font-weight: 600; }
.aia-parallel-tool-calls-list code {
  overflow: hidden;
  color: color-mix(in srgb, currentColor 60%, transparent);
  font: 0.88em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aia-parallel-tool-calls-list em {
  color: var(--ok);
  font: normal 600 0.84em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  opacity: var(--k);
  transform: translateX(calc((1 - var(--k)) * 0.5em));
}
@keyframes aia-parallel-tool-calls-clock {
  0%, 7% { --aia-parallel-tool-calls-t: 0; }
  70%, 97% { --aia-parallel-tool-calls-t: 1.08; }
  97.5%, 100% { --aia-parallel-tool-calls-t: 0; }
}
@keyframes aia-parallel-tool-calls-fade {
  0%, 92% { opacity: 1; }
  95.5%, 97.5% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-parallel-tool-calls-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-parallel-tool-calls,
  .aia-parallel-tool-calls-count,
  .aia-parallel-tool-calls-list {
    animation: none;
    --aia-parallel-tool-calls-t: 0.6;
  }
  .aia-parallel-tool-calls-list i::before { animation-duration: 2.4s; }
}

@media (prefers-reduced-motion: reduce) {
  .aia-parallel-tool-calls, .aia-parallel-tool-calls *, .aia-parallel-tool-calls::before, .aia-parallel-tool-calls::after, .aia-parallel-tool-calls *::before, .aia-parallel-tool-calls *::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 Tool Call Card
Agent Terminal Output
Agent File Edit Diff
Agent Plan Checklist