Connection Quality Indicator — Real Signal Bars from navigator.onLine and Network Information

<div class="demo">
  <div class="conn-widget">
    <div class="conn-bars" id="connBars" role="img" aria-label="Connection quality">
      <span class="conn-bar" data-level="1"></span>
      <span class="conn-bar" data-level="2"></span>
      <span class="conn-bar" data-level="3"></span>
      <span class="conn-bar" data-level="4"></span>
    </div>
    <div class="conn-text">
      <span class="conn-label" id="connLabel">Checking connection…</span>
      <span class="conn-sub" id="connSub">—</span>
    </div>
  </div>

  <div class="conn-controls">
    <p class="conn-controls-title">Simulate (this demo has no real network to measure):</p>
    <div class="conn-btn-row">
      <button class="conn-sim-btn" data-sim="offline">Offline</button>
      <button class="conn-sim-btn" data-sim="poor">Poor (2g)</button>
      <button class="conn-sim-btn" data-sim="good">Good (4g)</button>
      <button class="conn-sim-btn" data-sim="excellent">Excellent</button>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { width: 340px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }

.conn-widget { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px 16px; }
.conn-bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.conn-bar { width: 5px; background: #e2e8f0; border-radius: 2px; transition: background 0.25s ease; }
.conn-bar[data-level="1"] { height: 6px; }
.conn-bar[data-level="2"] { height: 11px; }
.conn-bar[data-level="3"] { height: 16px; }
.conn-bar[data-level="4"] { height: 22px; }

.conn-bars.offline .conn-bar { background: #fecaca; }
.conn-bars.poor .conn-bar[data-level="1"] { background: #ef4444; }
.conn-bars.fair .conn-bar[data-level="1"], .conn-bars.fair .conn-bar[data-level="2"] { background: #f59e0b; }
.conn-bars.good .conn-bar[data-level="1"], .conn-bars.good .conn-bar[data-level="2"], .conn-bars.good .conn-bar[data-level="3"] { background: #22c55e; }
.conn-bars.excellent .conn-bar { background: #10b981; }

.conn-text { display: flex; flex-direction: column; gap: 1px; }
.conn-label { font-size: 13px; font-weight: 700; color: #111827; }
.conn-sub { font-size: 11px; color: #94a3b8; }

.conn-controls { display: flex; flex-direction: column; gap: 8px; }
.conn-controls-title { font-size: 11px; color: #94a3b8; }
.conn-btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.conn-sim-btn { border: 1.5px solid #e2e8f0; background: #fff; color: #475569; font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: 8px; cursor: pointer; font-family: inherit; }
.conn-sim-btn:hover { border-color: #6366f1; color: #4338ca; }

const barsEl = document.getElementById('connBars');
const labelEl = document.getElementById('connLabel');
const subEl = document.getElementById('connSub');
const simButtons = document.querySelectorAll('.conn-sim-btn');

// A single classification function maps a "quality tier" to everything the
// UI needs (bar-fill class, label, live-region text) — every quality signal
// (real network events, or this demo's simulation buttons) funnels through
// the SAME function, so the bars and the text label can never disagree.
const TIERS = {
  offline: { className: 'offline', label: 'No connection', sub: 'Changes will sync once you\'re back online' },
  poor: { className: 'poor', label: 'Poor connection', sub: 'Slow network — some features may lag' },
  fair: { className: 'fair', label: 'Fair connection', sub: 'Usable, but not fast' },
  good: { className: 'good', label: 'Good connection', sub: 'Fast enough for most features' },
  excellent: { className: 'excellent', label: 'Excellent connection', sub: 'Fast and stable' },
};

function applyTier(tierKey) {
  const tier = TIERS[tierKey];
  barsEl.className = 'conn-bars ' + tier.className;
  barsEl.setAttribute('aria-label', 'Connection quality: ' + tier.label);
  labelEl.textContent = tier.label;
  subEl.textContent = tier.sub;
}

// Real-world classification, used whenever the browser actually reports
// network information: navigator.onLine is checked FIRST and independently,
// since a device can be "online" per the Network Information API's effective
// type while genuinely having zero connectivity for other reasons — offline
// always wins regardless of what any other signal claims.
function classifyRealConnection() {
  if (!navigator.onLine) return 'offline';

  const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  if (!conn || !conn.effectiveType) return 'good'; // no Network Information API support — assume a reasonable default rather than showing nothing

  const map = { 'slow-2g': 'poor', '2g': 'poor', '3g': 'fair', '4g': 'good' };
  return map[conn.effectiveType] || 'good';
}

function refreshFromRealConnection() {
  applyTier(classifyRealConnection());
}

window.addEventListener('online', refreshFromRealConnection);
window.addEventListener('offline', refreshFromRealConnection);

const conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (conn && conn.addEventListener) {
  conn.addEventListener('change', refreshFromRealConnection);
}

// Demo simulation buttons — in a real deployment these wouldn't exist;
// refreshFromRealConnection() above would be the only thing driving applyTier().
simButtons.forEach((btn) => {
  btn.addEventListener('click', () => applyTier(btn.dataset.sim));
});

refreshFromRealConnection();