AI CSS Animations

Run Step Progress Header

A run header reading Step 4 of 9: Writing migrations. The current segment of a nine part bar fills under a glint, the step label and its file roll up to the next step, and the elapsed time ticks.

Also known as: step 4 of 9 progress, segmented progress bar, multi step run header.

Writing migrationsdb/migrations/0042_rate_limits.sql

Updating Prisma modelsprisma/schema.prisma

Regenerating API typessrc/gen/api.ts

HTML

<div class="aia-step-progress-header" role="status" aria-label="Run in progress, step 4 of 9: Writing migrations">
  <div class="aia-step-progress-header-top" aria-hidden="true">
    <span class="aia-step-progress-header-spin"></span>
    <span class="aia-step-progress-header-step"></span>
    <span class="aia-step-progress-header-time"></span>
  </div>
  <div class="aia-step-progress-header-view">
    <div class="aia-step-progress-header-roll">
      <p><b>Writing migrations</b><code>db/migrations/0042_rate_limits.sql</code></p>
      <p><b>Updating Prisma models</b><code>prisma/schema.prisma</code></p>
      <p><b>Regenerating API types</b><code>src/gen/api.ts</code></p>
    </div>
  </div>
  <div class="aia-step-progress-header-bar" aria-hidden="true"><i style="--i: 0"></i><i style="--i: 1"></i><i style="--i: 2"></i><i style="--i: 3"></i><i style="--i: 4"></i><i style="--i: 5"></i><i style="--i: 6"></i><i style="--i: 7"></i><i style="--i: 8"></i></div>
</div>

CSS

@property --aia-step-progress-header-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 3;
}
@property --aia-step-progress-header-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --aia-step-progress-header-s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 14;
}
.aia-step-progress-header {
  --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-step-progress-header-t);
  width: 22em;
  padding: 0.8em 0.95em 0.9em;
  animation:
    aia-step-progress-header-clock var(--d) linear infinite,
    aia-step-progress-header-fade var(--d) linear infinite;
}
.aia-step-progress-header-top {
  display: flex;
  align-items: center;
  gap: 0.45em;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.76em;
  font-weight: 600;
}
.aia-step-progress-header-spin {
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 0.15em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  animation: aia-step-progress-header-spin 0.8s linear infinite;
}
.aia-step-progress-header-step {
  color: color-mix(in srgb, var(--c) 78%, currentColor);
  letter-spacing: 0.02em;
  --aia-step-progress-header-n: calc(var(--t) + 0.5);
  counter-reset: n var(--aia-step-progress-header-n);
}
.aia-step-progress-header-step::before { content: "Step " counter(n) " of 9"; }
.aia-step-progress-header-time {
  margin-left: auto;
  font: 500 1em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  counter-reset: s var(--aia-step-progress-header-s);
  animation: aia-step-progress-header-tick var(--d) steps(9, end) infinite;
}
.aia-step-progress-header-time::before { content: "2:" counter(s, decimal-leading-zero); }
.aia-step-progress-header-view {
  height: 2.75em;
  margin: 0.35em 0 0.55em;
  overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 7%, #000 93%, transparent);
  mask: linear-gradient(transparent, #000 7%, #000 93%, transparent);
}
.aia-step-progress-header-roll {
  animation: aia-step-progress-header-roll var(--d) cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.aia-step-progress-header-roll p {
  display: grid;
  align-content: center;
  height: 2.75em;
  margin: 0;
}
.aia-step-progress-header-roll b {
  font-size: 1.08em;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.aia-step-progress-header-roll code {
  color: color-mix(in srgb, currentColor 52%, transparent);
  font: 0.74em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-step-progress-header-bar {
  display: flex;
  gap: 0.22em;
}
.aia-step-progress-header-bar i {
  --f: clamp(0, var(--t) - var(--i), 1);
  --now: clamp(0, min(var(--t) - var(--i), var(--i) + 1 - var(--t)) * 25, 1);
  position: relative;
  flex: 1;
  height: 0.42em;
  overflow: hidden;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor 10%, transparent);
  box-shadow: 0 0 0 calc(var(--now) * 0.12em) color-mix(in srgb, var(--c) 25%, transparent);
}
.aia-step-progress-header-bar i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  transform: scaleX(var(--f));
  transform-origin: left;
}
.aia-step-progress-header-bar i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 60%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.7), transparent);
  opacity: var(--now);
  animation: aia-step-progress-header-glint 1.3s ease-in-out infinite;
}
@keyframes aia-step-progress-header-clock {
  0% { --aia-step-progress-header-t: 3.04; }
  31% { --aia-step-progress-header-t: 3.98; }
  34% { --aia-step-progress-header-t: 4.04; }
  63% { --aia-step-progress-header-t: 4.98; }
  66% { --aia-step-progress-header-t: 5.04; }
  96%, 97% { --aia-step-progress-header-t: 5.9; }
  98%, 100% { --aia-step-progress-header-t: 3.04; }
}
@keyframes aia-step-progress-header-roll {
  0%, 31% { transform: translateY(0); }
  35%, 63% { transform: translateY(-2.75em); }
  67%, 97% { transform: translateY(-5.5em); }
  98%, 100% { transform: translateY(0); }
}
@keyframes aia-step-progress-header-tick {
  from { --aia-step-progress-header-s: 14; }
  to { --aia-step-progress-header-s: 23; }
}
@keyframes aia-step-progress-header-glint {
  from { transform: translateX(-100%); }
  to { transform: translateX(200%); }
}
@keyframes aia-step-progress-header-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-step-progress-header-fade {
  0%, 94% { opacity: 1; }
  98%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-step-progress-header,
  .aia-step-progress-header-time,
  .aia-step-progress-header-roll {
    animation: none;
    --aia-step-progress-header-t: 3.5;
  }
  .aia-step-progress-header-spin,
  .aia-step-progress-header-bar i::after { animation: none; }
}

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