AI CSS Animations

Agent Run Timeline

A horizontal run timeline: Plan, Code, Test, Open PR. A glowing head travels the rail, each stop pulses while active and fills with a check as it is left behind, and the step label above rolls along.

Also known as: agent progress timeline, step progress bar animation, workflow timeline css.

PlanningWriting codeRunning testsOpening a PRRun complete run 128

HTML

<div class="aia-agent-run-timeline" role="status" aria-label="Agent run in progress">
  <div class="aia-agent-run-timeline-head">
    <span class="aia-agent-run-timeline-now"><span class="aia-agent-run-timeline-roll"><span>Planning</span><span>Writing code</span><span>Running tests</span><span>Opening a PR</span><span>Run complete</span></span></span>
    <code>run 128</code>
  </div>
  <div class="aia-agent-run-timeline-rail" aria-hidden="true">
    <i class="aia-agent-run-timeline-fill"></i>
    <ol>
      <li><span class="aia-agent-run-timeline-stop"><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></span><b>Plan</b><em>12s</em></li>
      <li><span class="aia-agent-run-timeline-stop"><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></span><b>Code</b><em>1m 40s</em></li>
      <li><span class="aia-agent-run-timeline-stop"><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></span><b>Test</b><em>38s</em></li>
      <li><span class="aia-agent-run-timeline-stop"><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></span><b>Open PR</b><em>4s</em></li>
    </ol>
  </div>
</div>

CSS

@property --aia-agent-run-timeline-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.aia-agent-run-timeline {
  --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: 9s;
  --t: var(--aia-agent-run-timeline-t);
  width: 23em;
  padding: 0.85em 1.1em 0.8em;
  animation: aia-agent-run-timeline-clock var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-agent-run-timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9em;
}
.aia-agent-run-timeline-now {
  height: 1.3em;
  overflow: hidden;
  font-size: 0.92em;
  font-weight: 600;
}
.aia-agent-run-timeline-roll {
  display: grid;
  transform: translateY(calc(var(--t) * -1.3em));
}
.aia-agent-run-timeline-roll span {
  height: 1.3em;
  line-height: 1.3em;
}
.aia-agent-run-timeline-head code {
  color: color-mix(in srgb, currentColor 50%, transparent);
  font: 500 0.75em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-agent-run-timeline-head,
.aia-agent-run-timeline-rail {
  animation: aia-agent-run-timeline-fade var(--d) linear infinite;
}
.aia-agent-run-timeline-rail {
  position: relative;
  --inset: 12.5%;
}
/* the empty rail and its fill run between the first and last stop */
.aia-agent-run-timeline-rail::before,
.aia-agent-run-timeline-fill {
  content: "";
  position: absolute;
  left: var(--inset);
  right: var(--inset);
  top: 0.55em;
  height: 0.12em;
  border-radius: 1em;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.aia-agent-run-timeline-fill {
  z-index: 0;
  background: var(--c);
  transform: scaleX(min(var(--t) / 3, 1));
  transform-origin: left;
}
.aia-agent-run-timeline-fill::after {
  content: "";
  position: absolute;
  right: -0.1em;
  top: -0.25em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--c);
  filter: blur(0.25em);
}
.aia-agent-run-timeline-rail ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.aia-agent-run-timeline-rail li {
  --i: 0;
  --done: clamp(0, (var(--t) - var(--i) - 0.12) * 5, 1);
  --on: clamp(0, min(var(--t) - var(--i) + 0.15, var(--i) + 0.15 - var(--t)) * 7, 1);
  display: grid;
  justify-items: center;
  gap: 0.15em;
}
.aia-agent-run-timeline-rail li:nth-child(2) { --i: 1; }
.aia-agent-run-timeline-rail li:nth-child(3) { --i: 2; }
.aia-agent-run-timeline-rail li:nth-child(4) { --i: 3; }
.aia-agent-run-timeline-stop {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  margin-bottom: 0.3em;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 6%, transparent);
  box-shadow: inset 0 0 0 0.1em color-mix(in srgb, currentColor 25%, transparent);
}
.aia-agent-run-timeline-stop::before {
  content: "";
  position: absolute;
  inset: -0.32em;
  border-radius: 50%;
  border: 0.1em solid var(--c);
  opacity: var(--on);
  animation: aia-agent-run-timeline-pulse 1.4s ease-in-out infinite;
}
.aia-agent-run-timeline-stop::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0.7em color-mix(in srgb, var(--c) 60%, transparent);
  transform: scale(max(var(--done), var(--on) * 0.45));
}
.aia-agent-run-timeline-stop svg {
  position: relative;
  z-index: 1;
  width: 0.75em;
  height: 0.75em;
  color: #fff;
  stroke-width: 3.4;
  opacity: var(--done);
}
.aia-agent-run-timeline-rail b {
  font-size: 0.78em;
  font-weight: 600;
  opacity: calc(0.5 + max(var(--done), var(--on)) * 0.5);
}
.aia-agent-run-timeline-rail em {
  color: color-mix(in srgb, currentColor 50%, transparent);
  font: normal 0.68em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  opacity: var(--done);
  transform: translateY(calc((1 - var(--done)) * 0.4em));
}
@keyframes aia-agent-run-timeline-clock {
  0%, 12% { --aia-agent-run-timeline-t: 0; }
  19%, 34% { --aia-agent-run-timeline-t: 1; }
  41%, 54% { --aia-agent-run-timeline-t: 2; }
  61%, 70% { --aia-agent-run-timeline-t: 3; }
  77%, 96% { --aia-agent-run-timeline-t: 4; }
  97%, 100% { --aia-agent-run-timeline-t: 0; }
}
@keyframes aia-agent-run-timeline-fade {
  0%, 92% { opacity: 1; }
  96%, 97% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-agent-run-timeline-pulse {
  0%, 100% { transform: scale(0.85); }
  50% { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-agent-run-timeline,
  .aia-agent-run-timeline-head,
  .aia-agent-run-timeline-rail {
    animation: none;
    --aia-agent-run-timeline-t: 2;
  }
  .aia-agent-run-timeline-stop::before { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aia-agent-run-timeline, .aia-agent-run-timeline *, .aia-agent-run-timeline::before, .aia-agent-run-timeline::after, .aia-agent-run-timeline *::before, .aia-agent-run-timeline *::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