Learn Coding Visually
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewStatus Bar Footer — Free HTML CSS JS SaaS Status Strip Footer
Status Bar Footer · Footers · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
Status Bar Footer — The Reassurance Strip Every Dev Tool Site Has
Developer-tool and infrastructure products almost universally put a status indicator somewhere a prospective customer can see it before they sign up — because "is this thing actually up right now" is a real, reasonable question before trusting a service with production traffic. This snippet builds that status strip as the top band of the footer, with a working (if simulated) state toggle so you can see both the healthy and incident states without wiring up a real status API first.
A pulsing dot is a claim, so it needs to look alive
.stf-dot is a small filled circle with a box-shadow halo and a @keyframes stfPulse animation cycling its opacity between 1 and .45 every two seconds. A static green dot reads as decoration; a gently pulsing one reads as "this is a live signal, not a screenshot" — the same visual grammar as a recording indicator or an online-presence dot in a chat app. The colour and the pulse both flip to red together when the .stf-down class is present, so the whole strip communicates state through colour, motion, and text simultaneously rather than relying on any single cue.
One class toggle drives three coordinated changes
Clicking "Simulate incident" toggles a single .stf-down class on the status bar's container. CSS handles everything visual from there — the background tint, the border colour, the dot colour, and the status text colour all key off that one class via descendant selectors (.stf-down .stf-dot, .stf-down .stf-status-text) — while the JS only swaps the status text content and the button label. This is the same "one class, many coordinated CSS changes" pattern used throughout the snippet library: state lives in one boolean, not in five different style properties set by hand.
Real footer content sits below, unaffected by the status state
Below the status strip, a conventional footer — brand blurb, platform links, support links, copyright — continues regardless of the simulated incident, because in a real product the footer's navigational job doesn't change when something's down; if anything, the support and status-history links matter more in that moment; keeping them visually separate and stable is deliberate.
Wiring this to a real status feed
In production, replace the click-toggled demo state with a fetch to your actual status provider (Statuspage, Better Stack, Instatus, or a custom endpoint) on page load, and set the .stf-down class and text based on the real response — the CSS and markup here don't need to change at all, only the source of truth for the boolean.
Build with AI
Build, Understand, Optimize, and Extend It With AI
Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to help you replace the simulated click-toggle with a real integration against whichever status provider you use — Statuspage, Better Stack, Instatus, or a custom internal endpoint — including how to poll it periodically so the footer reflects an incident within a reasonable delay of it actually starting. It's also a good candidate for a resilience discussion: ask what the status strip should show if the status-check request itself fails (a third "unknown" state is often the right answer, rather than silently defaulting to "operational"). For extending it, ask for a version that shows per-service status dots (API, dashboard, webhooks) instead of one aggregate indicator, or one that displays a small incident timeline/history list when the status page link is clicked, inline, without a full page navigation.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build a website footer topped with a "status strip" in plain HTML, CSS, and vanilla JavaScript — no library, no real API integration (demo-only state toggle).
Requirements:
- A slim status strip above the main footer content: a small pulsing coloured dot, a status text label ("All systems operational"), an uptime percentage, and a link to a full status page — laid out in one row that wraps sensibly on narrow screens.
- The dot should have a soft box-shadow halo and a CSS keyframe animation gently pulsing its opacity, styled green by default.
- Add a single toggleable "down" state (e.g. a class on the strip's container) that, when active, switches the strip's background tint, border colour, dot colour, and status text colour all to a red/danger palette and changes the status text to something like "Investigating a partial outage" — driven by one class toggle in CSS via descendant selectors, not by setting each style individually in JavaScript.
- Include a demo button (e.g. "Simulate incident") that toggles this state on click, so both the healthy and incident visuals can be seen without a real backend, and updates its own label to reflect the current state ("Simulate incident" / "Resolve incident").
- Below the status strip, add a standard footer: a brand name with short description, two columns of links, and a bottom row with a copyright line — all visually distinct from and unaffected by the status strip's state.
- Add a prefers-reduced-motion media query that stops the dot's pulse animation while keeping its colour state intact.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Step by step
How to Use
- 1Paste HTML, CSS, and JSA green, pulsing "All systems operational" strip renders above a standard footer.
- 2Click "Simulate incident"The strip flips to a red "Investigating a partial outage" state — colour, dot, and text all update together.
- 3Click again to resolveThe strip returns to the healthy green state, demonstrating both directions of the toggle.
- 4Connect to a real status sourceReplace the click handler with a fetch to your actual uptime/status API on page load, and toggle the same .stf-down class based on the response.
- 5Update the footer contentReplace the brand blurb, link columns, and copyright with your own.
- 6Export in your formatClick HTML, JSX, or Tailwind to download the version you need.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
No — the "Simulate incident" button toggles a demo state purely in the browser so you can see both the healthy and incident visual states immediately. Wire the same .stf-down class toggle to a real status provider (Statuspage, Better Stack, Instatus, or your own API) on page load for production use.
Fetch your status provider's API on page load, check whether the response indicates a full or partial outage, and call statusBar.classList.toggle('stf-down', isDown) with the real boolean instead of the click handler's toggled state. Update the status text and uptime percentage from the same response.
A static dot reads as decoration; a gently pulsing one signals that it represents a live, currently-checked value rather than a frozen screenshot — the same visual convention used by recording indicators and online-presence dots elsewhere on the web.
Yes — a prefers-reduced-motion: reduce media query removes the animation entirely, leaving the dot as a static, still colour-coded (green or red) indicator so the state remains fully readable without motion.
Yes — duplicate the dot-and-label pattern for each service you want to report on individually, and drive each one's .stf-down-equivalent class from that service's own status rather than a single shared boolean.
Click JSX, Vue, or Angular to download the converted component. Replace the click-toggled demo boolean with state fetched from your status API inside the component's data-fetching lifecycle (useEffect in React, onMounted in Vue), and drive the same conditional class from that fetched value.