No connection

Signal-strength motif, honest copy, and actions users expect when the network disappears.

You are offline

We cannot reach the fleet dashboard. Check Wi‑Fi or VPN, then try again. Cached boards from your last session may still open.

Go offline home

Tip: pin this workspace before you travel.

Widely Supported

uino-js

Quick implementation

.no-connection-demo { width: min(42rem, 100%); margin-inline: auto; }
.nc-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
}
.nc-bars span {
  width: 0.45rem;
  border-radius: 2px;
  background: var(--card-border);
}

Prompt this to your LLM

PWA-friendly wording and dual CTAs.

Build a no-connection empty state.

Classes: .no-connection-demo, .no-connection-card.
Include fake signal bars (div spans), heading, body copy, Retry button + link-styled secondary, small hint line.
role="status" on the card.

Return HTML + CSS.

Why this matters in 2026

Offline-first apps still need empathy when sync stops; visual signal loss reads faster than a raw error string.

The logic

Bar heights encode “fading” without animation; pair with copy that mentions cache so users trust partial data.

Accessibility & performance

Bars are aria-hidden; the title communicates state. Wire Retry to navigator.onLine in your app layer.