Deploy In Progress

A copy-paste error & 404 pages component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

Error & 404 PagesHTMLCSSany framework

Deploying your update

This should only take a minute. The page will refresh automatically.

Build 3 of 4 · Almost done

Copy into your project

HTML

<div class="nuda-ep2-deploy-progress">
  <div class="nuda-ep2-deploy-progress__spinner" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="9" stroke="rgba(255,255,255,.1)" stroke-width="2.5" />
      <path d="M12 3a9 9 0 019 9" stroke="#e4ff54" stroke-width="2.5" stroke-linecap="round" />
    </svg>
  </div>
  <p class="nuda-ep2-deploy-progress__title" aria-live="polite">Deploying your update</p>
  <p class="nuda-ep2-deploy-progress__sub">This should only take a minute. The page will refresh automatically.</p>
  <div class="nuda-ep2-deploy-progress__bar">
    <div class="nuda-ep2-deploy-progress__bar-fill"></div>
  </div>
  <span class="nuda-ep2-deploy-progress__pct">Build 3 of 4 · Almost done</span>
</div>

CSS

.nuda-ep2-deploy-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 20px;
  background: #101010;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  width: 100%;
  max-width: 260px;
  text-align: center;
  font-family: ui-sans-serif,system-ui;
}

.nuda-ep2-deploy-progress__spinner {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
}

.nuda-ep2-deploy-progress__spinner svg {
  width: 100%;
  height: 100%;
  animation: _nuda-ep2deployprogress-spin 1s linear infinite;
}

.nuda-ep2-deploy-progress__title {
  margin: 0;
  color: #fafafa;
  font-size: 14px;
  font-weight: 700;
}

.nuda-ep2-deploy-progress__sub {
  margin: 0;
  color: #8a8a8a;
  font-size: 11px;
  line-height: 1.5;
  max-width: 210px;
}

.nuda-ep2-deploy-progress__bar {
  width: 100%;
  max-width: 190px;
  height: 5px;
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}

.nuda-ep2-deploy-progress__bar-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,#e4ff54,#9be564);
  border-radius: 99px;
  transform-origin: left;
  transform: scaleX(.35);
  animation: _nuda-ep2deployprogress-fill 2.8s ease-in-out infinite;
}

.nuda-ep2-deploy-progress__pct {
  font-size: 10px;
  color: #666;
  font-family: ui-monospace,monospace;
}

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

@keyframes _nuda-ep2deployprogress-fill {
  0% {
    transform: scaleX(.15);
  }
  50% {
    transform: scaleX(.85);
  }
  100% {
    transform: scaleX(.35);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ep2-deploy-progress__spinner svg {
    animation: none;
  }
  .nuda-ep2-deploy-progress__bar-fill {
    animation: none;
    transform: scaleX(.6);
  }
}

How to use Deploy In Progress

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More error & 404 pages components

← Browse all NudaUI components