AI CSS Animations

Agent Working an Issue

An issue row assigned to an agent as it moves Todo, In Progress, In Review, Done. The status ring fills like a pie through an animated @property, and the status and activity lines roll with each move.

Also known as: linear issue status animation, issue tracker agent, ticket status animation.

ENG-1042 Fix flaky login test on Safari
Claude Picked up the issuePushed 3 commitsOpened PR #482Merged into main TodoIn ProgressIn ReviewDone

HTML

<div class="aia-agent-issue-status" role="status" aria-label="Agent working on issue ENG-1042">
  <div class="aia-agent-issue-status-row">
    <span class="aia-agent-issue-status-ring" 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></span>
    <code>ENG-1042</code>
    <b>Fix flaky login test on Safari</b>
  </div>
  <div class="aia-agent-issue-status-meta">
    <span class="aia-agent-issue-status-who"><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="M12 3.5l1.9 5.1 5.1 1.9-5.1 1.9L12 17.5l-1.9-5.1L5 10.5l5.1-1.9z"/></svg></i>Claude</span>
    <span class="aia-agent-issue-status-view"><span class="aia-agent-issue-status-roll"><span>Picked up the issue</span><span>Pushed 3 commits</span><span>Opened PR #482</span><span>Merged into main</span><span aria-hidden="true">Picked up the issue</span></span></span>
    <span class="aia-agent-issue-status-chip"><span class="aia-agent-issue-status-roll"><span>Todo</span><span>In Progress</span><span>In Review</span><span>Done</span><span aria-hidden="true">Todo</span></span></span>
  </div>
</div>

CSS

@property --aia-agent-issue-status-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-agent-issue-status-k {
  syntax: "<color>";
  inherits: true;
  initial-value: #8b8b94;
}
@property --aia-agent-issue-status-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.aia-agent-issue-status {
  --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: 10s;
  --k: var(--aia-agent-issue-status-k);
  --y: var(--aia-agent-issue-status-y);
  width: 22em;
  padding: 0.8em 0.95em;
  animation:
    aia-agent-issue-status-state var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite,
    aia-agent-issue-status-roll var(--d) cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
}
.aia-agent-issue-status-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.aia-agent-issue-status-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.11em var(--k);
}
.aia-agent-issue-status-ring::before {
  content: "";
  position: absolute;
  inset: 0.24em;
  border-radius: 50%;
  background: conic-gradient(var(--k) calc(var(--aia-agent-issue-status-p) * 1turn), transparent 0);
}
.aia-agent-issue-status-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--k);
  transform: scale(clamp(0, (var(--aia-agent-issue-status-p) - 0.8) * 5, 1));
}
.aia-agent-issue-status-ring svg {
  position: relative;
  z-index: 1;
  width: 0.7em;
  height: 0.7em;
  color: #fff;
  stroke-width: 3.6;
  opacity: clamp(0, (var(--aia-agent-issue-status-p) - 0.9) * 10, 1);
}
.aia-agent-issue-status-row code {
  color: color-mix(in srgb, currentColor 50%, transparent);
  font: 500 0.78em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-agent-issue-status-row b {
  overflow: hidden;
  font-size: 0.9em;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aia-agent-issue-status-meta {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.65em;
  padding-left: 1.65em;
  font-size: 0.78em;
}
.aia-agent-issue-status-who {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 600;
}
.aia-agent-issue-status-who i {
  display: grid;
  place-items: center;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
}
.aia-agent-issue-status-who svg {
  width: 0.85em;
  height: 0.85em;
  fill: currentColor;
  stroke: none;
}
.aia-agent-issue-status-view,
.aia-agent-issue-status-chip {
  height: 1.5em;
  overflow: hidden;
}
.aia-agent-issue-status-view {
  margin-right: auto;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.aia-agent-issue-status-roll {
  display: grid;
  transform: translateY(calc(var(--y) * -1.5em));
}
.aia-agent-issue-status-roll span {
  height: 1.5em;
  line-height: 1.5em;
  white-space: nowrap;
}
.aia-agent-issue-status-chip {
  padding: 0 0.6em;
  border-radius: 999em;
  background: color-mix(in srgb, var(--k) 14%, transparent);
  color: color-mix(in srgb, var(--k) 80%, currentColor);
  font-weight: 600;
  text-align: center;
}
@keyframes aia-agent-issue-status-state {
  0%, 18%, 100% { --aia-agent-issue-status-p: 0; --aia-agent-issue-status-k: #8b8b94; }
  25%, 43% { --aia-agent-issue-status-p: 0.5; --aia-agent-issue-status-k: #e5a00d; }
  50%, 68% { --aia-agent-issue-status-p: 0.75; --aia-agent-issue-status-k: #16a34a; }
  75%, 94% { --aia-agent-issue-status-p: 1; --aia-agent-issue-status-k: var(--c); }
}
@keyframes aia-agent-issue-status-roll {
  0%, 18% { --aia-agent-issue-status-y: 0; }
  25%, 43% { --aia-agent-issue-status-y: 1; }
  50%, 68% { --aia-agent-issue-status-y: 2; }
  75%, 94% { --aia-agent-issue-status-y: 3; }
  100% { --aia-agent-issue-status-y: 4; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-agent-issue-status {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.35);
  }
}

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