Build Step List

<!-- Build Step List — rows fade up on load; .is-done shows a lime check, .is-active shows a spinner -->
<div class="nuda-ct2-build-steps">
  <div class="nuda-ct2-build-steps__row is-done" style="--d: 0s">
    <span class="nuda-ct2-build-steps__dot">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <path d="M5 12 L10 17 L20 7" />
      </svg>
    </span>
    <span>Install dependencies</span>
  </div>
  <div class="nuda-ct2-build-steps__row is-done" style="--d: .12s">
    <span class="nuda-ct2-build-steps__dot">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <path d="M5 12 L10 17 L20 7" />
      </svg>
    </span>
    <span>Compile sources</span>
  </div>
  <div class="nuda-ct2-build-steps__row is-active" style="--d: .24s">
    <span class="nuda-ct2-build-steps__dot"><span class="nuda-ct2-build-steps__spinner"></span></span>
    <span>Bundle assets</span>
  </div>
  <div class="nuda-ct2-build-steps__row" style="--d: .36s">
    <span class="nuda-ct2-build-steps__dot"></span>
    <span>Deploy</span>
  </div>
</div>

.nuda-ct2-build-steps {
  width: 280px;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 12px 14px;
  font: 500 11px ui-monospace,SFMono-Regular,Menlo,monospace;
  color: #a1a1aa;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.nuda-ct2-build-steps__row {
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  transform: translateY(3px);
  animation: _nuda-ct2buildstepsin .4s cubic-bezier(.4,0,.2,1) var(--d,0s) forwards;
}

.nuda-ct2-build-steps__dot {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-ct2-build-steps__dot svg {
  width: 9px;
  height: 9px;
  color: #09090b;
}

.nuda-ct2-build-steps__row.is-done .nuda-ct2-build-steps__dot {
  background: #e4ff54;
  border-color: #e4ff54;
}

.nuda-ct2-build-steps__row.is-done {
  color: #cfcfcf;
}

.nuda-ct2-build-steps__row.is-active {
  color: #fafafa;
}

.nuda-ct2-build-steps__row.is-active .nuda-ct2-build-steps__dot {
  border-color: #38bdf8;
}

.nuda-ct2-build-steps__spinner {
  width: 8px;
  height: 8px;
  border: 1.5px solid rgba(56,189,248,.25);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: _nuda-ct2buildstepsspin .8s linear infinite;
}

@keyframes _nuda-ct2buildstepsin {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes _nuda-ct2buildstepsspin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ct2-build-steps__row {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .nuda-ct2-build-steps__spinner {
    animation: none;
  }
}