Maintenance page

A scheduled-maintenance notice with a status badge, expected return time, a progress bar and a link to a status page.

Tailwind CSSFeedback and empty statesmaintenancedowntimestatusnotice

Live preview

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex">
  <title>Scheduled maintenance</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 text-slate-900">
  <main class="grid min-h-dvh place-items-center px-4">
    <section class="w-full max-w-lg rounded-2xl bg-white p-8 shadow-lg" role="status">
      <p class="inline-flex items-center gap-2 rounded-full bg-amber-50 px-3 py-1 text-sm font-medium text-amber-800">
        <span class="relative flex size-2.5" aria-hidden="true">
          <span class="absolute inline-flex size-full rounded-full bg-amber-400 opacity-75 motion-safe:animate-ping"></span>
          <span class="relative inline-flex size-2.5 rounded-full bg-amber-500"></span>
        </span>
        Maintenance in progress
      </p>

      <h1 class="mt-5 text-2xl font-bold">We are making things better</h1>
      <p class="mt-2 text-slate-600">
        Acme is offline for planned upgrades. We expect to be back by
        <time datetime="2027-01-15T14:00:00Z" class="font-semibold">14:00 UTC on 15 January</time>.
      </p>

      <label for="m-progress" class="mt-6 block text-sm font-medium text-slate-700">Upgrade progress</label>
      <progress id="m-progress" value="60" max="100" class="mt-2 h-2 w-full accent-indigo-600">60%</progress>

      <ul class="mt-6 space-y-2 text-sm text-slate-600">
        <li class="flex justify-between"><span>Dashboard</span><span class="text-amber-700">Upgrading</span></li>
        <li class="flex justify-between"><span>API</span><span class="text-amber-700">Upgrading</span></li>
        <li class="flex justify-between"><span>Help centre</span><span class="text-emerald-700">Available</span></li>
      </ul>

      <a href="https://status.example.com" class="mt-8 inline-block text-sm font-semibold text-indigo-600 hover:underline">
        Follow live updates
      </a>
    </section>
  </main>
</body>
</html>

How it works

What it solves

When a site is down for planned work, visitors need to know it is intentional, how long it will last and where to look for updates. A calm, honest page reduces support requests and protects trust.

How it works

The layout is a centred card with an animated status dot, drawn by animate-ping over a solid circle, next to the label "Maintenance in progress". The animation is wrapped in motion-safe: so users who ask for reduced motion see a static dot. The expected return time is placed in a time element with a machine-readable datetime, and a progress bar is a native progress element with a value and max, which is announced properly by screen readers and styled through accent-indigo-600. A short list names the affected services, and a final link points to an external status page. Because the file is static and self-contained, it can be served directly by the web server during the work.

Adapting it

Return an HTTP 503 with a Retry-After header from your server so search engines treat the downtime as temporary. Update the progress value by hand, or remove the bar if you cannot estimate. Replace the services list with your own components.

Pitfalls

Serving this with status 200 may get it indexed as your real content.
Do not promise an exact time unless you control the work.
Keep external requests to a minimum; the server may be limited during maintenance.

How to use it

Save maintenance.html and configure your server to serve it with a 503 status and a Retry-After header while work is under way.
Update the datetime and visible time in the time element.
Adjust the progress value, or delete the bar.
Point the status link at your own status page.

Licence: DEV3 Snippet Licence. Free to use, change and ship in personal and commercial projects. Attribution is appreciated, not required. Please do not redistribute snippets as a collection.

Related snippets

Tailwind CSS · Feedback and empty statesUpvote button with live countA toggle upvote button that updates the count instantly, confirms with the server and rolls back on failure, styled by aria-pressed.upvotebuttonoptimistic-ui

React / Next.js · Feedback and empty statesCopy button with toast hookA React hook and button that copy text with a clipboard fallback and show a self-dismissing confirmation toast.reactclipboardtoast

Flutter · Feedback and empty statesShimmer loading product gridA dependency-free shimmer skeleton for product grids using a looping gradient ShaderMask while data loads.fluttershimmerskeleton

Flutter · Feedback and empty statesPaginated list with pull-to-refreshInfinite scrolling list that loads the next page near the bottom, supports pull-to-refresh and shows an inline retry row on error.flutterpaginationlistview