AI CSS Animations

Agent Fix Loop Iterations

An agent's fix loop: Iteration 3 shows 2 tests failing, the status rolls through editing limiter.ts and rerunning pnpm test, then Iteration 4: all passing lands as the failure chart hits zero.

Also known as: agent retry loop, fix until tests pass, iteration counter animation.

Fix loop

Iteration 3: 2 tests failing

Editing src/server/limiter.ts

Running pnpm test

Iteration 4: all passing

HTML

<div class="aia-fix-loop-iterations" role="status" aria-label="Fix loop, iteration 4: all tests passing">
  <div class="aia-fix-loop-iterations-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="M19.5 12a7.5 7.5 0 0 1-13 5.1M4.5 12a7.5 7.5 0 0 1 13-5.1"/><path d="M17.5 3v4h-4M6.5 21v-4h4"/></svg><b>Fix loop</b><span class="aia-fix-loop-iterations-n" aria-hidden="true"></span></div>
  <div class="aia-fix-loop-iterations-main">
    <div class="aia-fix-loop-iterations-left">
      <div class="aia-fix-loop-iterations-view">
        <div class="aia-fix-loop-iterations-roll">
          <p class="aia-fix-loop-iterations-bad">Iteration 3: 2 tests failing</p>
          <p class="aia-fix-loop-iterations-busy">Editing src/server/limiter.ts</p>
          <p class="aia-fix-loop-iterations-busy">Running pnpm test</p>
          <p class="aia-fix-loop-iterations-good">Iteration 4: all passing</p>
        </div>
      </div>
      <ul class="aia-fix-loop-iterations-tests" aria-hidden="true">
        <li><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7 7 17"/></svg><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>limiter › resets after window</li>
        <li><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7 7 17"/></svg><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>login › returns 429 on burst</li>
      </ul>
    </div>
    <div class="aia-fix-loop-iterations-chart" aria-hidden="true">
      <span style="--n: 7"><b>7</b><i></i><em>#1</em></span>
      <span style="--n: 4"><b>4</b><i></i><em>#2</em></span>
      <span style="--n: 2"><b>2</b><i></i><em>#3</em></span>
      <span class="aia-fix-loop-iterations-last"><b>0</b><i></i><em>#4</em></span>
    </div>
  </div>
</div>

CSS

@property --aia-fix-loop-iterations-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}
@property --aia-fix-loop-iterations-i {
  syntax: "<integer>";
  inherits: false;
  initial-value: 3;
}
.aia-fix-loop-iterations {
  --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-fix-loop-iterations-t);
  --ok: color-mix(in srgb, #16a34a 78%, currentColor);
  --bad: color-mix(in srgb, #dc2626 80%, currentColor);
  --pass: clamp(0, (var(--t) - 3) * 10, 1);
  --run: clamp(0, min(var(--t) - 2, 3 - var(--t)) * 10, 1);
  width: 23em;
  padding: 0.75em 0.9em 0.8em;
  animation:
    aia-fix-loop-iterations-clock var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite,
    aia-fix-loop-iterations-fade var(--d) linear infinite;
}
.aia-fix-loop-iterations-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.8em;
}
.aia-fix-loop-iterations-head svg {
  width: 1.15em;
  height: 1.15em;
  color: color-mix(in srgb, var(--c) 80%, currentColor);
  transform: rotate(calc(var(--t) * 180deg));
}
.aia-fix-loop-iterations-head b { margin-right: auto; }
.aia-fix-loop-iterations-n {
  padding: 0.15em 0.55em;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor 7%, transparent);
  font: 600 0.9em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --aia-fix-loop-iterations-i: calc(3 + var(--pass));
  counter-reset: i var(--aia-fix-loop-iterations-i);
}
.aia-fix-loop-iterations-n::before { content: "iteration " counter(i) " of 5"; }
.aia-fix-loop-iterations-main {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-top: 0.5em;
}
.aia-fix-loop-iterations-left {
  flex: 1;
  min-width: 0;
}
.aia-fix-loop-iterations-view {
  height: 1.7em;
  overflow: hidden;
  font-size: 0.9em;
}
.aia-fix-loop-iterations-roll {
  transform: translateY(calc((0.5 - var(--t)) * 1.7em));
}
.aia-fix-loop-iterations-roll p {
  display: flex;
  align-items: center;
  gap: 0.4em;
  height: 1.7em;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}
.aia-fix-loop-iterations-bad { color: var(--bad); }
.aia-fix-loop-iterations-good { color: var(--ok); }
.aia-fix-loop-iterations-busy {
  color: color-mix(in srgb, currentColor 70%, transparent);
}
.aia-fix-loop-iterations-busy::before {
  content: "";
  box-sizing: border-box;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  border: 0.14em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  animation: aia-fix-loop-iterations-spin 0.8s linear infinite;
}
.aia-fix-loop-iterations-tests {
  margin: 0.35em 0 0;
  padding: 0;
  list-style: none;
}
.aia-fix-loop-iterations-tests li {
  display: flex;
  align-items: center;
  gap: 0.45em;
  height: 1.7em;
  color: color-mix(in srgb, currentColor 68%, transparent);
  font: 0.72em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
  opacity: calc(1 - var(--run) * 0.45);
}
.aia-fix-loop-iterations-tests span {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background: color-mix(in srgb, #dc2626 calc((1 - var(--pass)) * 14%), color-mix(in srgb, #16a34a calc(var(--pass) * 16%), transparent));
}
.aia-fix-loop-iterations-tests svg {
  grid-area: 1 / 1;
  width: 0.85em;
  height: 0.85em;
  stroke-width: 3;
  color: var(--bad);
  opacity: calc(1 - var(--pass));
}
.aia-fix-loop-iterations-tests svg + svg {
  color: var(--ok);
  opacity: var(--pass);
  transform: scale(calc(0.4 + var(--pass) * 0.6));
}
.aia-fix-loop-iterations-tests li:nth-child(2) svg + svg { transform: scale(calc(0.4 + var(--pass) * 0.6)) rotate(calc((1 - var(--pass)) * -40deg)); }
.aia-fix-loop-iterations-chart {
  display: flex;
  align-items: end;
  gap: 0.3em;
  height: 4.2em;
  margin-bottom: 1em;
  padding: 0 0.1em;
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.aia-fix-loop-iterations-chart span {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  width: 1.35em;
  height: 100%;
}
.aia-fix-loop-iterations-chart b {
  margin-bottom: 0.2em;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font: 600 0.62em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-fix-loop-iterations-chart i {
  width: 100%;
  height: calc(var(--n) * 0.38em);
  border-radius: 0.25em 0.25em 0 0;
  background: color-mix(in srgb, #dc2626 55%, transparent);
}
.aia-fix-loop-iterations-chart span:nth-child(3) i { background: var(--bad); }
.aia-fix-loop-iterations-chart em {
  position: absolute;
  top: calc(100% + 0.5em);
  color: color-mix(in srgb, currentColor 45%, transparent);
  font: normal 0.56em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-fix-loop-iterations-last {
  opacity: var(--pass);
  transform: translateY(calc((1 - var(--pass)) * 0.5em));
}
.aia-fix-loop-iterations-chart .aia-fix-loop-iterations-last b { color: var(--ok); }
.aia-fix-loop-iterations-chart .aia-fix-loop-iterations-last i {
  height: 0.3em;
  border-radius: 0.1em;
  background: var(--ok);
}
@keyframes aia-fix-loop-iterations-clock {
  0%, 22% { --aia-fix-loop-iterations-t: 0.5; }
  27%, 42% { --aia-fix-loop-iterations-t: 1.5; }
  47%, 58% { --aia-fix-loop-iterations-t: 2.5; }
  63%, 97% { --aia-fix-loop-iterations-t: 3.5; }
  98%, 100% { --aia-fix-loop-iterations-t: 0.5; }
}
@keyframes aia-fix-loop-iterations-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-fix-loop-iterations-fade {
  0%, 94% { opacity: 1; }
  98%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-fix-loop-iterations {
    animation: none;
    --aia-fix-loop-iterations-t: 3.5;
  }
  .aia-fix-loop-iterations-busy::before { animation: none; }
}

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