Maintenance Mode

Hazard stripes crawl while the wrench works and the ETA counts down

Down for a tune-up
back in about 42 min

Create a maintenance mode screen. A dark full-screen (or card) with: a crawling hazard-stripe bar pinned to the top edge (repeating 45deg stripes of accent and background, animated by shifting background-position-x one full period per 1.2s, linear and seamless), a wrench icon in a tinted circle that works away (rotate 0 → -24 → 14 → -24 → 0 over 2.4s, transform-origin near the handle at 70% 70%), a bold "Down for a tune-up" headline, and a monospace ETA line ("back in about 42 min") whose minute number ticks down, each change fading up 5px in the accent color. Keep the whole screen calm: no pulsing backgrounds, just the two motions. Drive the ETA from your real maintenance window; round to minutes. Accessibility: the screen uses role="status" and the ETA aria-live="polite". If prefers-reduced-motion is set, freeze the stripes and wrench, updating only the number. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data