AI CSS Animations

SQL Query Running

A Postgres query runs under a sweeping progress line, then result rows stream into a small table one at a time, each flashing as it lands, while the header settles on 4 rows in 38 ms.

Also known as: database query animation, sql results loading, text to sql ui.

analytics 
SELECT plan, count(*) AS users FROM accounts
GROUP BY plan ORDER BY users DESC;

HTML

<div class="aia-sql-query-running" role="status" aria-label="Running a SQL query">
  <div class="aia-sql-query-running-head">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><ellipse cx="12" cy="6" rx="7" ry="2.8"/><path d="M5 6v12c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8V6M5 12c0 1.5 3.1 2.8 7 2.8s7-1.3 7-2.8"/></svg><span>analytics</span>
    <span class="aia-sql-query-running-state" aria-hidden="true"><span>Running</span><span class="aia-sql-query-running-rows"></span></span>
  </div>
  <pre class="aia-sql-query-running-sql"><code><b>SELECT</b> plan, <i>count</i>(*) <b>AS</b> users <b>FROM</b> accounts
<b>GROUP BY</b> plan <b>ORDER BY</b> users <b>DESC</b>;</code></pre>
  <table class="aia-sql-query-running-table" aria-hidden="true">
    <thead><tr><th>plan</th><th>users</th></tr></thead>
    <tbody>
      <tr><td>free</td><td>8,214</td></tr>
      <tr><td>pro</td><td>2,906</td></tr>
      <tr><td>team</td><td>641</td></tr>
      <tr><td>enterprise</td><td>58</td></tr>
    </tbody>
  </table>
</div>

CSS

@property --aia-sql-query-running-t {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --aia-sql-query-running-n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-sql-query-running {
  --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: 7.5s;
  --t: var(--aia-sql-query-running-t);
  --k: clamp(0, (var(--t) - 4.4) * 10, 1);
  width: 22em;
  padding: 0.75em 0.85em 0.65em;
  animation: aia-sql-query-running-clock var(--d) cubic-bezier(0.35, 0, 0.25, 1) infinite;
}
.aia-sql-query-running-head {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 0.1em 0.5em;
  font-size: 0.78em;
  font-weight: 600;
}
.aia-sql-query-running-head svg {
  width: 1.1em;
  height: 1.1em;
  color: var(--c);
}
.aia-sql-query-running-state {
  display: grid;
  justify-items: end;
  margin-left: auto;
  font: 500 0.92em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-sql-query-running-state > * { grid-area: 1 / 1; }
.aia-sql-query-running-state span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: color-mix(in srgb, var(--c) 80%, currentColor);
  opacity: calc(1 - var(--k));
}
.aia-sql-query-running-state span:first-child::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  box-sizing: border-box;
  border-radius: 50%;
  border: 0.13em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  animation: aia-sql-query-running-spin 0.75s linear infinite;
}
.aia-sql-query-running-rows {
  color: color-mix(in srgb, currentColor 55%, transparent);
  --aia-sql-query-running-n: clamp(0, var(--t) - 0.6, 4);
  counter-reset: n var(--aia-sql-query-running-n);
  opacity: var(--k);
}
.aia-sql-query-running-rows::before { content: counter(n) " rows in 38 ms"; }
.aia-sql-query-running-sql {
  position: relative;
  margin: 0;
  padding: 0.5em 0.7em;
  overflow: hidden;
  border-radius: 0.5em;
  background: color-mix(in srgb, currentColor 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 9%, transparent);
  font: 0.68em / 1.6 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-sql-query-running-sql code { font: inherit; }
.aia-sql-query-running-sql b {
  color: color-mix(in srgb, var(--c) 80%, currentColor);
  font-weight: 600;
}
.aia-sql-query-running-sql i {
  color: color-mix(in srgb, #d97706 84%, currentColor);
  font-style: normal;
}
/* the progress line under the query while it runs */
.aia-sql-query-running-sql::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  height: 0.2em;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: calc(1 - clamp(0, (var(--t) - 1) * 6, 1));
  animation: aia-sql-query-running-sweep 1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aia-sql-query-running-table {
  width: 100%;
  margin-top: 0.45em;
  border-collapse: collapse;
  font: 0.72em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  animation: aia-sql-query-running-fade var(--d) linear infinite;
}
.aia-sql-query-running-table th,
.aia-sql-query-running-table td {
  height: 1.75em;
  padding: 0 0.75em;
  text-align: left;
}
.aia-sql-query-running-table th {
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  color: color-mix(in srgb, currentColor 50%, transparent);
  font-weight: 600;
}
.aia-sql-query-running-table th:last-child,
.aia-sql-query-running-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.aia-sql-query-running-table tr { --i: 0; }
.aia-sql-query-running-table tbody tr {
  --g: clamp(0, (var(--t) - 1.1 - var(--i)) * 4, 1);
  --h: clamp(0, 1 - (var(--t) - 1.35 - var(--i)) * 2, 1);
  background: color-mix(in srgb, var(--c) calc(var(--g) * var(--h) * 16%), transparent);
  opacity: var(--g);
  transform: translateY(calc((1 - var(--g)) * -0.6em));
}
.aia-sql-query-running-table tbody tr:nth-child(2) { --i: 1; }
.aia-sql-query-running-table tbody tr:nth-child(3) { --i: 2; }
.aia-sql-query-running-table tbody tr:nth-child(4) { --i: 3; }
.aia-sql-query-running-table tbody tr + tr td { border-top: 1px solid color-mix(in srgb, currentColor 7%, transparent); }
@keyframes aia-sql-query-running-clock {
  0%, 6% { --aia-sql-query-running-t: 0; }
  24% { --aia-sql-query-running-t: 1; }
  66%, 97% { --aia-sql-query-running-t: 5.2; }
  97.5%, 100% { --aia-sql-query-running-t: 0; }
}
@keyframes aia-sql-query-running-fade {
  0%, 92% { opacity: 1; }
  95.5%, 97.5% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes aia-sql-query-running-spin {
  to { transform: rotate(360deg); }
}
@keyframes aia-sql-query-running-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(260%); }
}
@media (prefers-reduced-motion: reduce) {
  .aia-sql-query-running,
  .aia-sql-query-running-table {
    animation: none;
    --aia-sql-query-running-t: 5.2;
  }
  .aia-sql-query-running-sql::after { animation: none; }
  .aia-sql-query-running-state span:first-child::before { animation-duration: 2.4s; }
}

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