AI CSS Animations

Rate Limit Countdown

A 429 rate limit card: a ring drains as Retrying in 12s counts down, the stalled progress bar waits in grey, then the dial fills, a play mark pops in and the run resumes to 18/18. @property driven.

Also known as: 429 rate limit ui, too many requests retry, api rate limit countdown.

429 Rate limitedResumed Picking up where it stopped Limit: 50 requests per minute

HTML

<div class="aia-rate-limit-countdown" role="status" aria-label="Rate limited, retrying in 12 seconds">
  <div class="aia-rate-limit-countdown-top">
    <span class="aia-rate-limit-countdown-dial" aria-hidden="true">
      <span class="aia-rate-limit-countdown-n"></span>
      <svg class="aia-rate-limit-countdown-go" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.5 5.8v12.4l10-6.2z"/></svg>
    </span>
    <span class="aia-rate-limit-countdown-text">
      <span class="aia-rate-limit-countdown-title">
        <code>429</code>
        <span class="aia-rate-limit-countdown-swap"><span>Rate limited</span><span class="aia-rate-limit-countdown-back">Resumed</span></span>
      </span>
      <span class="aia-rate-limit-countdown-swap aia-rate-limit-countdown-sub"><span class="aia-rate-limit-countdown-secs"></span><span class="aia-rate-limit-countdown-back">Picking up where it stopped</span></span>
      <span class="aia-rate-limit-countdown-meta">Limit: 50 requests per minute</span>
    </span>
  </div>
  <div class="aia-rate-limit-countdown-run" aria-hidden="true">
    <span>Summarizing support tickets</span>
    <span class="aia-rate-limit-countdown-bar"></span>
    <span class="aia-rate-limit-countdown-k"></span>
  </div>
</div>

CSS

@property --aia-rate-limit-countdown-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-rate-limit-countdown-s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}
@property --aia-rate-limit-countdown-k {
  syntax: "<integer>";
  inherits: false;
  initial-value: 7;
}
.aia-rate-limit-countdown {
  --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: 8.5s;
  --t: var(--aia-rate-limit-countdown-t);
  --r: clamp(0, (var(--t) - 12) * 2, 1);
  width: 20.5em;
  animation: aia-rate-limit-countdown-clock var(--d) linear infinite;
}
.aia-rate-limit-countdown-top,
.aia-rate-limit-countdown-run {
  animation: aia-rate-limit-countdown-fade var(--d) linear infinite;
}
.aia-rate-limit-countdown-top {
  display: flex;
  align-items: center;
  gap: 0.85em;
}
.aia-rate-limit-countdown-dial {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 3.3em;
  height: 3.3em;
  border-radius: 50%;
}
.aia-rate-limit-countdown-dial::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(max(0, 12 - var(--t)) * 30deg), color-mix(in srgb, var(--c) 16%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.26em), #000 calc(100% - 0.25em));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.26em), #000 calc(100% - 0.25em));
}
.aia-rate-limit-countdown-dial::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0.4em 1em -0.4em color-mix(in srgb, var(--c) 80%, transparent);
  transform: scale(var(--r));
}
.aia-rate-limit-countdown-dial > * { grid-area: 1 / 1; }
.aia-rate-limit-countdown-n {
  font: 700 1.05em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  opacity: calc(1 - var(--r));
  --aia-rate-limit-countdown-s: max(0, 12.499 - var(--t));
  counter-reset: s var(--aia-rate-limit-countdown-s);
}
.aia-rate-limit-countdown-n::before { content: counter(s); }
.aia-rate-limit-countdown-go {
  position: relative;
  z-index: 1;
  width: 1.4em;
  height: 1.4em;
  margin-left: 0.15em;
  color: #fff;
  fill: currentColor;
  opacity: var(--r);
  transform: scale(calc(0.3 + clamp(0, (var(--t) - 12.25) * 2, 1) * 0.7));
}
.aia-rate-limit-countdown-text {
  display: grid;
  gap: 0.12em;
  min-width: 0;
}
.aia-rate-limit-countdown-title {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.95em;
  font-weight: 600;
}
.aia-rate-limit-countdown-title code {
  padding: 0.1em 0.38em;
  border-radius: 0.35em;
  background: color-mix(in srgb, #d97706 calc((1 - var(--r)) * 16%), color-mix(in srgb, currentColor 7%, transparent));
  color: color-mix(in srgb, #d97706 calc((1 - var(--r)) * 84%), color-mix(in srgb, currentColor 55%, transparent));
  font: 600 0.8em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-rate-limit-countdown-swap { display: grid; }
.aia-rate-limit-countdown-swap > * {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: calc(1 - var(--r));
  transform: translateY(calc(var(--r) * -0.45em));
}
.aia-rate-limit-countdown-swap > .aia-rate-limit-countdown-back {
  opacity: var(--r);
  transform: translateY(calc((1 - var(--r)) * 0.45em));
}
.aia-rate-limit-countdown-sub {
  color: color-mix(in srgb, currentColor 65%, transparent);
  font-size: 0.82em;
}
.aia-rate-limit-countdown-secs {
  font-variant-numeric: tabular-nums;
  --aia-rate-limit-countdown-s: max(0, 12.499 - var(--t));
  counter-reset: s var(--aia-rate-limit-countdown-s);
}
.aia-rate-limit-countdown-secs::before { content: "Retrying in " counter(s) "s"; }
.aia-rate-limit-countdown-meta {
  color: color-mix(in srgb, currentColor 45%, transparent);
  font-size: 0.7em;
}
.aia-rate-limit-countdown-run {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.85em;
  padding-top: 0.75em;
  border-top: 1px solid color-mix(in srgb, currentColor 9%, transparent);
  font-size: 0.76em;
}
.aia-rate-limit-countdown-run > span:first-child {
  white-space: nowrap;
  opacity: calc(0.55 + var(--r) * 0.45);
}
.aia-rate-limit-countdown-bar {
  position: relative;
  flex: 1;
  height: 0.45em;
  overflow: hidden;
  border-radius: 999em;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.aia-rate-limit-countdown-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--c) calc(var(--r) * 100%), color-mix(in srgb, currentColor 30%, transparent));
  transform: scaleX(calc((7 + clamp(0, var(--t) - 13, 1) * 11) / 18));
  transform-origin: left;
}
.aia-rate-limit-countdown-k {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font: 500 1em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  --aia-rate-limit-countdown-k: calc(7 + clamp(0, var(--t) - 13, 1) * 11);
  counter-reset: k var(--aia-rate-limit-countdown-k);
}
.aia-rate-limit-countdown-k::before { content: counter(k) "/18"; }
@keyframes aia-rate-limit-countdown-clock {
  0%, 3% { --aia-rate-limit-countdown-t: 0; }
  60% { --aia-rate-limit-countdown-t: 12; }
  66% { --aia-rate-limit-countdown-t: 13; }
  90%, 96% { --aia-rate-limit-countdown-t: 14; }
  96.5%, 100% { --aia-rate-limit-countdown-t: 0; }
}
@keyframes aia-rate-limit-countdown-fade {
  0%, 94% { opacity: 1; }
  96%, 97.5% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-rate-limit-countdown,
  .aia-rate-limit-countdown-top,
  .aia-rate-limit-countdown-run {
    animation: none;
    --aia-rate-limit-countdown-t: 0;
  }
}

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