AI CSS Animations

Deploy Pipeline

Build, Test and Deploy stage boxes run left to right: each spins in the accent, fills its connector and turns green with a time, then a Ready chip slides in with the live preview URL.

Also known as: deployment animation, ci cd pipeline ui, build test deploy stages.

feat/rate-limita3f9c2e
  1. Buildpnpm build
  2. Testvitest run
  3. Deploypreview
Waiting for a preview URL Readyacme-web-git-feat-rate-limit.vercel.app

HTML

<div class="aia-deploy-pipeline" role="status" aria-label="Deploying feat/rate-limit">
  <div class="aia-deploy-pipeline-head">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="5.5" r="2.2"/><circle cx="6" cy="18.5" r="2.2"/><circle cx="18" cy="8" r="2.2"/><path d="M6 7.7v8.6M18 10.2c0 4-4 4.5-10.4 6.8"/></svg><code>feat/rate-limit</code><span>a3f9c2e</span>
  </div>
  <ol class="aia-deploy-pipeline-stages">
    <li><span class="aia-deploy-pipeline-top"><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><b>Build</b></span><code>pnpm build</code><em aria-hidden="true"><span>running</span><span>38s</span></em></li>
    <li><span class="aia-deploy-pipeline-top"><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><b>Test</b></span><code>vitest run</code><em aria-hidden="true"><span>running</span><span>52s</span></em></li>
    <li><span class="aia-deploy-pipeline-top"><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><b>Deploy</b></span><code>preview</code><em aria-hidden="true"><span>running</span><span>14s</span></em></li>
  </ol>
  <div class="aia-deploy-pipeline-out">
    <span class="aia-deploy-pipeline-wait">Waiting for a preview URL</span>
    <span class="aia-deploy-pipeline-url"><i aria-hidden="true"></i><b>Ready</b><code>acme-web-git-feat-rate-limit.vercel.app</code><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 4h6v6M20 4l-8.5 8.5M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/></svg></span>
  </div>
</div>

CSS

@property --aia-deploy-pipeline-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.aia-deploy-pipeline {
  --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-deploy-pipeline-t);
  --ok: color-mix(in srgb, #16a34a 78%, currentColor);
  --u: clamp(0, (var(--t) - 3.05) * 5, 1);
  width: 24em;
  padding: 0.8em 0.9em 0.8em;
  animation: aia-deploy-pipeline-clock var(--d) cubic-bezier(0.45, 0, 0.35, 1) infinite;
}
.aia-deploy-pipeline-head {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0.1em 0.65em;
  font-size: 0.78em;
}
.aia-deploy-pipeline-head svg {
  width: 1.1em;
  height: 1.1em;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
.aia-deploy-pipeline-head code { font: 600 1em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
.aia-deploy-pipeline-head span {
  margin-left: auto;
  color: color-mix(in srgb, currentColor 45%, transparent);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-deploy-pipeline-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: aia-deploy-pipeline-fade var(--d) linear infinite;
}
.aia-deploy-pipeline-stages li {
  --i: 0;
  --a: clamp(0, min((var(--t) - var(--i)) * 8, (var(--i) + 1 - var(--t)) * 8), 1);
  --k: clamp(0, (var(--t) - var(--i) - 1) * 8, 1);
  --l: clamp(0, (var(--t) - var(--i) - 0.85) * 6.6, 1);
  position: relative;
  display: grid;
  gap: 0.25em;
  padding: 0.55em 0.6em 0.5em;
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) calc(var(--a) * 9%), color-mix(in srgb, currentColor 4%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) calc(var(--a) * 60%), color-mix(in srgb, #16a34a calc(var(--k) * 40%), color-mix(in srgb, currentColor 10%, transparent)));
}
.aia-deploy-pipeline-stages li:nth-child(2) { --i: 1; }
.aia-deploy-pipeline-stages li:nth-child(3) { --i: 2; }
/* connector to the next stage, filling as this one finishes */
.aia-deploy-pipeline-stages li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 100%;
  top: calc(50% - 0.07em);
  width: 0.9em;
  height: 0.14em;
  background: linear-gradient(var(--ok), var(--ok)) 0 0 / calc(var(--l) * 100%) 100% no-repeat, color-mix(in srgb, currentColor 14%, transparent);
}
.aia-deploy-pipeline-top {
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.aia-deploy-pipeline-top i {
  display: grid;
  place-items: center;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.1em color-mix(in srgb, currentColor calc((1 - var(--a) - var(--k)) * 28%), transparent);
}
.aia-deploy-pipeline-top i::before {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.13em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  opacity: var(--a);
  animation: aia-deploy-pipeline-spin 0.75s linear infinite;
}
.aia-deploy-pipeline-top i::after {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--ok);
  transform: scale(var(--k));
}
.aia-deploy-pipeline-top svg {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: 0.72em;
  height: 0.72em;
  color: #fff;
  stroke-width: 3.6;
  opacity: var(--k);
}
.aia-deploy-pipeline-top b {
  font-size: 0.86em;
  font-weight: 600;
  opacity: calc(0.55 + max(var(--a), var(--k)) * 0.45);
}
.aia-deploy-pipeline-stages code {
  overflow: hidden;
  color: color-mix(in srgb, currentColor 50%, transparent);
  font: 0.68em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aia-deploy-pipeline-stages em {
  display: grid;
  font: normal 600 0.66em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-deploy-pipeline-stages em > * { grid-area: 1 / 1; }
.aia-deploy-pipeline-stages em span:first-child {
  color: color-mix(in srgb, var(--c) 80%, currentColor);
  opacity: var(--a);
}
.aia-deploy-pipeline-stages em span:last-child {
  color: var(--ok);
  opacity: var(--k);
}
.aia-deploy-pipeline-out {
  display: grid;
  margin-top: 0.7em;
  animation: aia-deploy-pipeline-fade var(--d) linear infinite;
}
.aia-deploy-pipeline-out > * { grid-area: 1 / 1; }
.aia-deploy-pipeline-wait {
  align-self: center;
  justify-self: center;
  color: color-mix(in srgb, currentColor 40%, transparent);
  font-size: 0.72em;
  opacity: calc(1 - var(--u));
}
.aia-deploy-pipeline-url {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.65em;
  border-radius: 0.55em;
  background: color-mix(in srgb, #16a34a 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #16a34a 30%, transparent);
  font-size: 0.75em;
  opacity: var(--u);
  transform: translateY(calc((1 - var(--u)) * 0.6em)) scale(calc(0.96 + var(--u) * 0.04));
}
.aia-deploy-pipeline-url i {
  position: relative;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--ok);
}
.aia-deploy-pipeline-url i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ok);
  animation: aia-deploy-pipeline-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.aia-deploy-pipeline-url b {
  color: var(--ok);
  font-weight: 700;
}
.aia-deploy-pipeline-url code {
  overflow: hidden;
  font: 500 0.95em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: 0.2em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aia-deploy-pipeline-url svg {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-left: auto;
  color: color-mix(in srgb, currentColor 55%, transparent);
}
@keyframes aia-deploy-pipeline-clock {
  0%, 6% { --aia-deploy-pipeline-t: 0; }
  26% { --aia-deploy-pipeline-t: 1; }
  48% { --aia-deploy-pipeline-t: 2; }
  60% { --aia-deploy-pipeline-t: 3; }
  66%, 97% { --aia-deploy-pipeline-t: 3.3; }
  97.5%, 100% { --aia-deploy-pipeline-t: 0; }
}
@keyframes aia-deploy-pipeline-fade {
  0%, 92% { opacity: 1; }
  95.5%, 97.5% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-deploy-pipeline-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-deploy-pipeline-ping {
  0% { opacity: 0.6; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.6); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-deploy-pipeline,
  .aia-deploy-pipeline-stages,
  .aia-deploy-pipeline-out {
    animation: none;
    --aia-deploy-pipeline-t: 3.3;
  }
  .aia-deploy-pipeline-url i::after { animation: none; }
}

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