AI CSS Animations

Sandbox VM Booting

A cloud sandbox spinning up for an agent: the status chip breathes amber, boot log lines print with their timestamps under a progress bar and timer, then it flips green and settles on Ready in 2.1s.

Also known as: sandbox starting animation, vm boot log, cloud dev environment loading.

sbx_7f3k2q BootingReady
Ready in 2.1s

HTML

<div class="aia-sandbox-booting" role="status" aria-label="Sandbox booting, ready in 2.1 seconds">
  <div class="aia-sandbox-booting-head">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="16" height="7" rx="1.5"/><rect x="4" y="13" width="16" height="7" rx="1.5"/><path d="M8 7.5h.01M8 16.5h.01"/></svg><code>sbx_7f3k2q</code>
    <span class="aia-sandbox-booting-spec" aria-hidden="true">node 22 · 2 vCPU · 4 GB</span>
    <span class="aia-sandbox-booting-chip"><span>Booting</span><span>Ready</span></span>
  </div>
  <div class="aia-sandbox-booting-log" aria-hidden="true">
    <p><i>0.00s</i>Pulling image node:22-bookworm</p>
    <p><i>0.38s</i>Restoring snapshot, 1.2 GB</p>
    <p><i>1.06s</i>Mounting /workspace</p>
    <p><i>1.52s</i>Installing deps from cache</p>
    <p><i>1.94s</i>Starting shell on port 8080</p>
  </div>
  <div class="aia-sandbox-booting-foot">
    <span class="aia-sandbox-booting-busy" aria-hidden="true"><i></i><b></b></span>
    <span class="aia-sandbox-booting-ready"><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>Ready in 2.1s</span>
  </div>
</div>

CSS

@property --aia-sandbox-booting-ds {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --aia-sandbox-booting-s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --aia-sandbox-booting-r {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.aia-sandbox-booting {
  --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;
  overflow: hidden;
  border-radius: 0.8em;
  background: color-mix(in srgb, var(--c) 5%, #0d0d11);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.09), 0 1em 2.2em -1em rgb(0 0 0 / 0.55);
  color: #e4e4e7;
  --d: 7s;
  --ok: #4ade80;
  --wait: #fbbf24;
  --lh: 1.55em;
  width: 22em;
  animation: aia-sandbox-booting-fade var(--d) linear infinite;
}
.aia-sandbox-booting-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.6em 0.8em;
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
  font-size: 0.78em;
}
.aia-sandbox-booting-head > svg {
  width: 1.15em;
  height: 1.15em;
  color: color-mix(in srgb, var(--c) 55%, #fff);
}
.aia-sandbox-booting-head code {
  font: 600 0.95em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-sandbox-booting-spec {
  color: rgb(255 255 255 / 0.45);
  font-size: 0.9em;
  white-space: nowrap;
}
.aia-sandbox-booting-chip {
  display: grid;
  margin-left: auto;
  font-size: 0.9em;
  font-weight: 600;
}
.aia-sandbox-booting-chip span {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 0.35em;
  justify-self: end;
  padding: 0.12em 0.55em;
  border-radius: 999em;
  background: color-mix(in srgb, var(--wait) 16%, transparent);
  color: var(--wait);
  animation: aia-sandbox-booting-out var(--d) ease infinite;
}
.aia-sandbox-booting-chip span::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  animation: aia-sandbox-booting-breathe 1.1s ease-in-out infinite;
}
.aia-sandbox-booting-chip span + span {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  color: var(--ok);
  animation-name: aia-sandbox-booting-in;
}
.aia-sandbox-booting-chip span + span::before { animation: none; }
.aia-sandbox-booting-log {
  box-sizing: border-box;
  height: calc(var(--lh) * 5 + 0.9em);
  padding: 0.45em 0.8em;
  font: 0.72em / 1 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-sandbox-booting-log p {
  display: flex;
  align-items: center;
  gap: 0.9em;
  height: var(--lh);
  margin: 0;
  color: rgb(255 255 255 / 0.72);
  white-space: nowrap;
  animation: aia-sandbox-booting-l1 var(--d) steps(1, end) infinite;
}
.aia-sandbox-booting-log i {
  color: color-mix(in srgb, var(--c) 50%, #fff);
  font-style: normal;
  opacity: 0.8;
}
.aia-sandbox-booting-log p:nth-child(2) { animation-name: aia-sandbox-booting-l2; }
.aia-sandbox-booting-log p:nth-child(3) { animation-name: aia-sandbox-booting-l3; }
.aia-sandbox-booting-log p:nth-child(4) { animation-name: aia-sandbox-booting-l4; }
.aia-sandbox-booting-log p:nth-child(5) { animation-name: aia-sandbox-booting-l5; }
.aia-sandbox-booting-foot {
  display: grid;
  padding: 0.55em 0.8em 0.7em;
  border-top: 1px solid rgb(255 255 255 / 0.07);
}
.aia-sandbox-booting-foot > * {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 0.7em;
}
.aia-sandbox-booting-busy {
  animation: aia-sandbox-booting-out var(--d) ease infinite;
}
.aia-sandbox-booting-busy i {
  position: relative;
  flex: 1;
  height: 0.3em;
  overflow: hidden;
  border-radius: 999em;
  background: rgb(255 255 255 / 0.1);
}
.aia-sandbox-booting-busy i::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  transform-origin: left;
  animation: aia-sandbox-booting-bar var(--d) linear infinite;
}
.aia-sandbox-booting-busy b {
  width: 3em;
  color: rgb(255 255 255 / 0.6);
  font: 500 0.78em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  text-align: right;
  --aia-sandbox-booting-s: calc(var(--aia-sandbox-booting-ds) / 10 - 0.5);
  --aia-sandbox-booting-r: calc(var(--aia-sandbox-booting-ds) - var(--aia-sandbox-booting-s) * 10);
  counter-reset: s var(--aia-sandbox-booting-s) r var(--aia-sandbox-booting-r);
  animation: aia-sandbox-booting-clock var(--d) linear infinite;
}
.aia-sandbox-booting-busy b::before { content: counter(s) "." counter(r) "s"; }
.aia-sandbox-booting-ready {
  color: var(--ok);
  font-size: 0.92em;
  font-weight: 650;
  animation: aia-sandbox-booting-in var(--d) cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.aia-sandbox-booting-ready svg {
  width: 1.15em;
  height: 1.15em;
  margin-right: -0.35em;
  stroke-width: 3;
}
@keyframes aia-sandbox-booting-clock {
  0% { --aia-sandbox-booting-ds: 0; }
  55%, 100% { --aia-sandbox-booting-ds: 21; }
}
@keyframes aia-sandbox-booting-bar {
  0% { transform: scaleX(0.02); }
  12% { transform: scaleX(0.2); }
  25% { transform: scaleX(0.42); }
  38% { transform: scaleX(0.62); }
  48% { transform: scaleX(0.86); }
  55%, 100% { transform: scaleX(1); }
}
@keyframes aia-sandbox-booting-l1 {
  0%, 2% { opacity: 0; }
  3%, 100% { opacity: 1; }
}
@keyframes aia-sandbox-booting-l2 {
  0%, 11% { opacity: 0; }
  12%, 100% { opacity: 1; }
}
@keyframes aia-sandbox-booting-l3 {
  0%, 27% { opacity: 0; }
  28%, 100% { opacity: 1; }
}
@keyframes aia-sandbox-booting-l4 {
  0%, 38% { opacity: 0; }
  39%, 100% { opacity: 1; }
}
@keyframes aia-sandbox-booting-l5 {
  0%, 48% { opacity: 0; }
  49%, 100% { opacity: 1; }
}
@keyframes aia-sandbox-booting-out {
  0%, 55% { opacity: 1; transform: none; }
  59%, 100% { opacity: 0; transform: translateY(-0.4em); }
}
@keyframes aia-sandbox-booting-in {
  0%, 56% { opacity: 0; transform: scale(0.85); }
  61%, 100% { opacity: 1; transform: none; }
}
@keyframes aia-sandbox-booting-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes aia-sandbox-booting-fade {
  0%, 93% { opacity: 1; }
  97%, 99% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .aia-sandbox-booting,
  .aia-sandbox-booting-chip span,
  .aia-sandbox-booting-log p,
  .aia-sandbox-booting-busy,
  .aia-sandbox-booting-busy i::before,
  .aia-sandbox-booting-busy b,
  .aia-sandbox-booting-ready {
    animation-play-state: paused;
    animation-delay: calc(var(--d) * -0.8);
  }
  .aia-sandbox-booting-chip span::before { animation: none; }
}

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