webdevpuneet.com

Related Snippets

144 in Dashboards category
1–6 of 60

Interact.js Draggable and Resizable Dashboard Panels with Snapping

Dragula Copy vs Move Lists with Spill Control

SortableJS Shared Groups: Clone from a Palette into a Page Builder

SortableJS Drag Handle with Pinned and Locked Rows

SortableJS Nested Sortable Tree with Keyboard Controls

SortableJS Multi-List Kanban with Persistence and WIP Limit

Network Information Badge — Free navigator.connection Live Status

Network Information Badge · Dashboards · Plain HTML, CSS & JS · Live preview

CategoryDashboards
TagsDashboard UIForms & ValidationCSS Grid

Copy & paste

Source Code

<section class="nib-wrap">
  <span class="nib-tag">navigator.connection</span>
  <h1>Network status</h1>
  <p id="nibStatus">Reads the real Network Information API where available and updates live on every connection change.</p>

  <div class="nib-badge-row">
    <div class="nib-badge" id="nibBadge">
      <span class="nib-dot" id="nibDot"></span>
      <span id="nibType">Checking…</span>
    </div>
  </div>

  <div class="nib-grid">
    <div class="nib-stat">
      <span class="nib-stat-label">Effective type</span>
      <span class="nib-stat-value" id="nibEffective">—</span>
    </div>
    <div class="nib-stat">
      <span class="nib-stat-label">Downlink</span>
      <span class="nib-stat-value" id="nibDownlink">—</span>
    </div>
    <div class="nib-stat">
      <span class="nib-stat-label">RTT</span>
      <span class="nib-stat-value" id="nibRtt">—</span>
    </div>
    <div class="nib-stat">
      <span class="nib-stat-label">Data saver</span>
      <span class="nib-stat-value" id="nibSaveData">—</span>
    </div>
  </div>

  <ul class="nib-log" id="nibLog"></ul>
  <p class="nib-note" id="nibNote">Checking Network Information API support…</p>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Real navigator.connection reads
effectiveType, downlink, rtt, saveData all genuine.
Live change event
Updates immediately as network conditions shift.
Timestamped event log
A scrolling history of every observed change.
Universal online/offline tracking
Works in every browser via standard window events.
Honest unsupported copy
States plainly Firefox/Safari never implemented this.
Vendor-prefix fallback checks
Covers mozConnection/webkitConnection historically.
Clean stat grid layout
Four metrics in a scannable dashboard card.
No dependencies
Pure vanilla JS against native APIs.

About this UI Snippet

Network Information Badge — Real Connection Data Where the Browser Allows It

Screenshot of the Network Information Badge snippet rendered live

This badge reads genuine connection quality data from navigator.connection and updates live as the network changes — while being upfront that this API is a Chromium-only feature with real, permanent browser support gaps.

Four real signals, one object

navigator.connection (the NetworkInformation interface) exposes effectiveType (a bucketed estimate — 'slow-2g', '2g', '3g', or '4g' — derived from recent round-trip time and downlink measurements, not the literal radio technology), downlink (an estimated effective bandwidth in Mbps), rtt (estimated round-trip time in milliseconds), and saveData (whether the user has requested reduced data usage at the OS or browser level). This snippet reads and displays all four.

Live updates via a real event

connection.addEventListener('change', ...) fires whenever any of those four values shifts — switching from wifi to cellular, a cellular connection degrading from 4g to 3g effective type, or the user toggling Data Saver mid-session. The badge's log panel timestamps every change so you can watch the values move in real time rather than only reading a one-time snapshot.

A real, permanent support gap — not a temporary bug

navigator.connection is supported across Chromium-based browsers (Chrome, Edge, Opera, Samsung Internet, Android WebView) but Firefox and Safari — including iOS Safari — have never implemented it, and there's no signal either has near-term plans to. This isn't a progressive-enhancement timing issue; on those browsers, navigator.connection is simply undefined forever. The snippet's fallback copy says this plainly rather than implying the feature is "loading" or "coming soon."

Online/offline still works everywhere

Regardless of navigator.connection support, the badge separately tracks basic connectivity via navigator.onLine and the standard online/offline window events — universally supported — so even on Firefox or Safari the badge still reflects real connectivity state, just without the richer quality metrics.

Pair this with an uptime status page or status dashboard for a fuller connectivity-aware operations UI.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA live connection badge and stat grid render.
  2. 2
    Check the stat grideffectiveType, downlink, RTT, and saveData populate where supported.
  3. 3
    Throttle your networkIn Chrome DevTools, simulate 3G — the badge updates via the change event.
  4. 4
    Toggle Data SaversaveData flips and a change event logs it.
  5. 5
    Go offlineThe dot turns red via the offline window event.
  6. 6
    Test in Firefox or SafariThe badge falls back to onLine-only tracking with clear copy.

Real-world uses

Common Use Cases

Adaptive media loading
Skip autoplay video and load smaller images on slow-2g or saveData connections, using real navigator.connection values to decide what to serve.
Ops and status panels
Pair with a status dashboard so teams see their own connection quality beside system health, updated live when the network changes.
Metered-connection warnings
Warn people before large downloads or uploads on metered or slow connections, using effectiveType, downlink and rtt to estimate how painful it will be.
Diagnostics and debug panels
Show real connection quality while debugging field issues, with a timestamped log of every network change the browser reports during the session.
Offline-first PWAs
Surface connectivity next to an uptime status page pattern, with a clean fallback for browsers where the API is unsupported.
Related: Reconnect Backoff Visualizer
See the Reconnect Backoff Visualizer for a related dashboards pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Because navigator.connection (the Network Information API) is a Chromium-only feature — supported in Chrome, Edge, Opera, Samsung Internet, and Android WebView, but never implemented in Firefox or Safari, including iOS Safari. This isn't a bug or a loading state; on those browsers navigator.connection is permanently undefined, so the badge correctly shows "not available" for effectiveType, downlink, rtt, and saveData while still tracking basic online/offline state through universally-supported window events.

It's a bucketed estimate ('slow-2g', '2g', '3g', or '4g') that the browser derives from recent observed round-trip time and downlink measurements — not a report of the literal radio technology in use. A wifi connection with high latency and low throughput can report as '3g' effectiveType even though it's not cellular at all; the value describes experienced quality, not the underlying network type.

Whenever the browser's internal estimate of effectiveType, downlink, rtt, or saveData shifts meaningfully — switching networks (wifi to cellular), a connection degrading or improving, or the user toggling their OS/browser Data Saver setting. It's not on a fixed timer; it's driven by the browser's own network-quality heuristics, so frequency varies by platform and real conditions.

No. navigator.onLine and the window online/offline events are universally supported across all major browsers and only report whether the device has any network connectivity at all — a simple boolean. navigator.connection is the much richer, Chromium-only API providing effectiveType, downlink, rtt, and saveData. This badge uses both: onLine for guaranteed cross-browser basic connectivity, and connection for detailed quality where available.

Read navigator.connection once on mount, store its current values in component state, and attach the 'change' listener (plus window 'online'/'offline' listeners) in the same effect, removing all three in cleanup. Since navigator.connection itself is a live object (not a snapshot), re-reading its properties inside the change handler — rather than relying on stale closured values — keeps the displayed numbers accurate.