AI CSS Animations

Agent Todo List Progress

An agent's todo list where a highlight band carrying the in-progress spinner glides down row by row, finished items tick into checked boxes and dim, and a segmented bar fills to 5/5 up top.

Also known as: todowrite animation, agent task list ui, in progress todo spinner.

Todos
  • Add RateLimiter class
  • Wire it into POST /login
  • Write lockout tests
  • Update docs/api.md
  • Run the full suite

HTML

<div class="aia-todo-list-progress" role="status" aria-label="Agent working through a todo list">
  <div class="aia-todo-list-progress-head">
    <span>Todos</span>
    <span class="aia-todo-list-progress-segs" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span>
    <span class="aia-todo-list-progress-num" aria-hidden="true"></span>
  </div>
  <div class="aia-todo-list-progress-body">
    <span class="aia-todo-list-progress-band" aria-hidden="true"></span>
    <ul class="aia-todo-list-progress-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><span>Add RateLimiter class</span></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><span>Wire it into POST /login</span></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><span>Write lockout tests</span></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><span>Update docs/api.md</span></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><span>Run the full suite</span></li>
    </ul>
  </div>
</div>

CSS

@property --aia-todo-list-progress-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}
@property --aia-todo-list-progress-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-todo-list-progress {
  --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-todo-list-progress-t);
  --row: 1.75em;
  width: 19.5em;
  padding: 0.75em 0.8em 0.6em;
  animation: aia-todo-list-progress-clock var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-todo-list-progress-head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0.2em 0.5em;
  font-size: 0.8em;
  font-weight: 600;
}
.aia-todo-list-progress-segs {
  display: flex;
  flex: 1;
  gap: 0.2em;
}
.aia-todo-list-progress-segs i {
  --i: 0;
  flex: 1;
  height: 0.32em;
  border-radius: 1em;
  background: linear-gradient(var(--c), var(--c)) 0 0 / calc(clamp(0, (var(--t) - var(--i) - 0.8) * 2.5, 1) * 100%) 100% no-repeat, color-mix(in srgb, currentColor 10%, transparent);
}
.aia-todo-list-progress-segs i:nth-child(2) { --i: 1; }
.aia-todo-list-progress-segs i:nth-child(3) { --i: 2; }
.aia-todo-list-progress-segs i:nth-child(4) { --i: 3; }
.aia-todo-list-progress-segs i:nth-child(5) { --i: 4; }
.aia-todo-list-progress-num {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font: 600 0.95em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --aia-todo-list-progress-n: clamp(0, var(--t) - 1, 5);
  counter-reset: n var(--aia-todo-list-progress-n);
  animation: aia-todo-list-progress-fade var(--d) linear infinite;
}
.aia-todo-list-progress-num::before { content: counter(n) "/5"; }
.aia-todo-list-progress-body {
  position: relative;
  animation: aia-todo-list-progress-fade var(--d) linear infinite;
}
/* one band, with the spinner on it, gliding down the rows */
.aia-todo-list-progress-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--row);
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--c) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
  transform: translateY(calc((var(--t) - 0.5) * var(--row)));
  opacity: clamp(0, (5.2 - var(--t)) * 4, 1);
}
.aia-todo-list-progress-band::before {
  content: "";
  position: absolute;
  left: 0.65em;
  top: calc(50% - 0.45em);
  width: 0.9em;
  height: 0.9em;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.13em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  animation: aia-todo-list-progress-spin 0.75s linear infinite;
}
.aia-todo-list-progress-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 0.8em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-todo-list-progress-list li {
  --i: 0;
  --a: clamp(0, 1 - max(var(--t) - var(--i) - 0.5, var(--i) + 0.5 - var(--t)) * 2.5, 1);
  --k: clamp(0, (var(--t) - var(--i) - 0.8) * 2.5, 1);
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: calc(var(--row) / 0.8);
  padding: 0 0.8em;
}
.aia-todo-list-progress-list li:nth-child(2) { --i: 1; }
.aia-todo-list-progress-list li:nth-child(3) { --i: 2; }
.aia-todo-list-progress-list li:nth-child(4) { --i: 3; }
.aia-todo-list-progress-list li:nth-child(5) { --i: 4; }
.aia-todo-list-progress-list i {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.05em;
  height: 1.05em;
  border-radius: 0.25em;
  box-shadow: inset 0 0 0 0.1em color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor calc(var(--k) * 12%), transparent);
  opacity: calc(1 - var(--a));
}
.aia-todo-list-progress-list svg {
  width: 0.85em;
  height: 0.85em;
  stroke-width: 3.2;
  stroke-dasharray: 22;
  stroke-dashoffset: calc((1 - var(--k)) * 22);
}
.aia-todo-list-progress-list span {
  white-space: nowrap;
  color: color-mix(in srgb, var(--c) calc(var(--a) * 55%), currentColor);
  font-weight: calc(400 + var(--a) * 200);
  opacity: calc(0.78 + var(--a) * 0.22 - var(--k) * 0.4);
}
@keyframes aia-todo-list-progress-clock {
  0%, 12% { --aia-todo-list-progress-t: 0.5; }
  17%, 29% { --aia-todo-list-progress-t: 1.5; }
  34%, 46% { --aia-todo-list-progress-t: 2.5; }
  51%, 63% { --aia-todo-list-progress-t: 3.5; }
  68%, 80% { --aia-todo-list-progress-t: 4.5; }
  85%, 97% { --aia-todo-list-progress-t: 5.5; }
  97.5%, 100% { --aia-todo-list-progress-t: 0.5; }
}
@keyframes aia-todo-list-progress-fade {
  0%, 92% { opacity: 1; }
  95.5%, 97.5% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-todo-list-progress-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-todo-list-progress,
  .aia-todo-list-progress-num,
  .aia-todo-list-progress-body {
    animation: none;
    --aia-todo-list-progress-t: 2.5;
  }
  .aia-todo-list-progress-band::before { animation-duration: 2.4s; }
}

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