AI CSS Animations

Spreadsheet AI Fill Column

A sheet with an AI Industry column: queued cells shimmer as skeletons while the active cell outline steps down the rows, and each answer lands with a flash until the status reads Filled 5 cells.

Also known as: ai spreadsheet column, ai enrich table, sheet autofill animation.

CompanyDomainIndustry 2Linearlinear.appDev tools 3Rampramp.comFintech 4Figmafigma.comDesign software 5Notionnotion.soProductivity 6Stripestripe.comPayments

Filled 5 cells

HTML

<div class="aia-spreadsheet-ai-fill" role="status" aria-label="AI is filling the Industry column">
  <div class="aia-spreadsheet-ai-fill-grid">
    <span class="aia-spreadsheet-ai-fill-h"></span><span class="aia-spreadsheet-ai-fill-h">Company</span><span class="aia-spreadsheet-ai-fill-h">Domain</span><span class="aia-spreadsheet-ai-fill-h aia-spreadsheet-ai-fill-ai"><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>Industry</span>
    <span class="aia-spreadsheet-ai-fill-n">2</span><span>Linear</span><span>linear.app</span><span class="aia-spreadsheet-ai-fill-c" style="--i: 0"><i>Dev tools</i></span>
    <span class="aia-spreadsheet-ai-fill-n">3</span><span>Ramp</span><span>ramp.com</span><span class="aia-spreadsheet-ai-fill-c" style="--i: 1"><i>Fintech</i></span>
    <span class="aia-spreadsheet-ai-fill-n">4</span><span>Figma</span><span>figma.com</span><span class="aia-spreadsheet-ai-fill-c" style="--i: 2"><i>Design software</i></span>
    <span class="aia-spreadsheet-ai-fill-n">5</span><span>Notion</span><span>notion.so</span><span class="aia-spreadsheet-ai-fill-c" style="--i: 3"><i>Productivity</i></span>
    <span class="aia-spreadsheet-ai-fill-n">6</span><span>Stripe</span><span>stripe.com</span><span class="aia-spreadsheet-ai-fill-c" style="--i: 4"><i>Payments</i></span>
  </div>
  <p class="aia-spreadsheet-ai-fill-foot"><span class="aia-spreadsheet-ai-fill-busy" aria-hidden="true"></span><span class="aia-spreadsheet-ai-fill-done"><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>Filled 5 cells</span></p>
</div>

CSS

@property --aia-spreadsheet-ai-fill-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-spreadsheet-ai-fill-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-spreadsheet-ai-fill {
  --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: 8s;
  --t: var(--aia-spreadsheet-ai-fill-t);
  --ok: color-mix(in srgb, #16a34a 78%, currentColor);
  --done: clamp(0, (var(--t) - 5.2) * 6, 1);
  width: 23em;
  padding: 0;
  overflow: hidden;
  animation:
    aia-spreadsheet-ai-fill-clock var(--d) linear infinite,
    aia-spreadsheet-ai-fill-fade var(--d) linear infinite;
}
.aia-spreadsheet-ai-fill-grid {
  display: grid;
  grid-template-columns: 1.9em 1fr 1.1fr 1.35fr;
  grid-auto-rows: 1.75em;
  font-size: 0.8em;
}
.aia-spreadsheet-ai-fill-grid > span {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 0.6em;
  border-right: 1px solid color-mix(in srgb, currentColor 9%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent);
  white-space: nowrap;
}
.aia-spreadsheet-ai-fill-grid > span:nth-child(4n) { border-right: 0; }
.aia-spreadsheet-ai-fill-grid > span:nth-child(4n + 3) {
  color: color-mix(in srgb, currentColor 58%, transparent);
  font: 0.94em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-spreadsheet-ai-fill-grid > .aia-spreadsheet-ai-fill-h {
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-size: 0.92em;
  font-weight: 600;
}
.aia-spreadsheet-ai-fill-grid > .aia-spreadsheet-ai-fill-ai {
  gap: 0.35em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: color-mix(in srgb, var(--c) 80%, currentColor);
}
.aia-spreadsheet-ai-fill-ai svg {
  width: 1.05em;
  height: 1.05em;
  fill: currentColor;
  stroke: none;
  animation: aia-spreadsheet-ai-fill-twinkle 1.6s ease-in-out infinite;
}
.aia-spreadsheet-ai-fill-grid > .aia-spreadsheet-ai-fill-n {
  justify-content: center;
  padding: 0;
  background: color-mix(in srgb, currentColor 5%, transparent);
  color: color-mix(in srgb, currentColor 45%, transparent);
  font: 0.86em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-spreadsheet-ai-fill-c {
  --f: clamp(0, (var(--t) - var(--i) - 1) * 5, 1);
  --a: clamp(0, min(var(--t) - var(--i), var(--i) + 1.15 - var(--t)) * 12, 1);
  background: color-mix(in srgb, var(--c) calc(clamp(0, 1 - (var(--t) - var(--i) - 1) * 1.2, 1) * var(--f) * 22%), transparent);
}
/* the skeleton while the cell waits, brighter on the active one */
.aia-spreadsheet-ai-fill-c::before {
  content: "";
  position: absolute;
  left: 0.6em;
  width: calc(45% + var(--i) * 6%);
  height: 0.6em;
  border-radius: 999em;
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 9%, transparent) 30%, color-mix(in srgb, var(--c) 35%, transparent) 50%, color-mix(in srgb, currentColor 9%, transparent) 70%) 0 0 / 300% 100%;
  opacity: calc((1 - var(--f)) * (0.55 + var(--a) * 0.45));
  animation: aia-spreadsheet-ai-fill-shimmer 1.4s linear infinite;
}
/* the active cell outline */
.aia-spreadsheet-ai-fill-c::after {
  content: "";
  position: absolute;
  inset: -1px;
  box-shadow: inset 0 0 0 0.14em var(--c);
  opacity: var(--a);
}
.aia-spreadsheet-ai-fill-c i {
  position: relative;
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  opacity: var(--f);
  transform: translateY(calc((1 - var(--f)) * 0.4em));
}
.aia-spreadsheet-ai-fill-foot {
  display: grid;
  margin: 0;
  padding: 0.5em 0.75em;
  font-size: 0.74em;
  font-weight: 500;
}
.aia-spreadsheet-ai-fill-foot > * {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.aia-spreadsheet-ai-fill-busy {
  color: color-mix(in srgb, currentColor 58%, transparent);
  opacity: calc(1 - var(--done));
  --aia-spreadsheet-ai-fill-n: clamp(0, var(--t) - 0.6, 5);
  counter-reset: n var(--aia-spreadsheet-ai-fill-n);
}
.aia-spreadsheet-ai-fill-busy::before {
  content: "";
  box-sizing: border-box;
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  border: 0.15em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  animation: aia-spreadsheet-ai-fill-spin 0.8s linear infinite;
}
.aia-spreadsheet-ai-fill-busy::after { content: "Filling Industry, " counter(n) " of 5"; }
.aia-spreadsheet-ai-fill-done {
  color: var(--ok);
  opacity: var(--done);
  transform: translateY(calc((1 - var(--done)) * 0.5em));
}
.aia-spreadsheet-ai-fill-done svg {
  width: 1.05em;
  height: 1.05em;
  stroke-width: 3;
}
@keyframes aia-spreadsheet-ai-fill-clock {
  0%, 4% { --aia-spreadsheet-ai-fill-t: 0; }
  70%, 97% { --aia-spreadsheet-ai-fill-t: 6.2; }
  98%, 100% { --aia-spreadsheet-ai-fill-t: 0; }
}
@keyframes aia-spreadsheet-ai-fill-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -50% 0; }
}
@keyframes aia-spreadsheet-ai-fill-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(0.8) rotate(45deg); }
}
@keyframes aia-spreadsheet-ai-fill-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-spreadsheet-ai-fill-fade {
  0%, 93% { opacity: 1; }
  97%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-spreadsheet-ai-fill {
    animation: none;
    --aia-spreadsheet-ai-fill-t: 6.2;
  }
  .aia-spreadsheet-ai-fill-ai svg,
  .aia-spreadsheet-ai-fill-c::before,
  .aia-spreadsheet-ai-fill-busy::before { animation: none; }
}

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