CDN Cache Hit Ratio Widget — Free HTML CSS JS Snippet

A CDN's entire value proposition comes down to one ratio: what fraction of requests get served from a nearby cache instead of round-tripping back to origin. This widget makes that ratio the visual centerpiece — a large animated ring shows the current overall hit rate, a running total of hits versus misses accumulates beside it, and a per-edge-location list breaks the same ratio down by region so a regression in one location doesn't hide inside a healthy global average.

The ring drawn with stroke-dasharray, not a chart library

The SVG has two overlapping circles of the same radius: a light gray track and a colored foreground circle whose stroke-dasharray is set to the circle's full circumference (CIRC = 2 * Math.PI * 48) and whose stroke-dashoffset is animated to represent the unfilled portion. Setting offset = CIRC - (pct / 100) * CIRC means at 0% the offset equals the full circumference (nothing visible) and at 100% the offset is 0 (the full circle drawn). The circle is rotated -90deg so the arc starts from 12 o'clock rather than the default 3 o'clock, matching how a progress ring is conventionally read. This is the standard pure-SVG technique for a progress ring with no canvas or charting dependency.

The ring's color itself carries meaning, not just its fill amount

setRing() sets the circle's stroke color based on threshold bands — green at 85%+, amber between 60-85%, red below 60% — recomputed on every tick. A cache hit ratio isn't just a number that goes up or down; it has industry-typical healthy ranges, and encoding that directly in the ring's color means a viewer doesn't need to know "is 72% good or bad" from memory, the amber color already answers that.

Per-request simulation, not a single random number per tick

simulateTick() doesn't just pick one random hit-rate percentage per second — it simulates a random *count* of individual requests (40 + Math.floor(Math.random() * 60)), routes each one to a randomly chosen edge location, and rolls a 90%-probability hit/miss outcome for each request individually before aggregating into both the global ring and each edge's own running total. This produces the same statistical texture real traffic has — some edges get more requests than others in a given tick purely by chance, and the overall ratio converges toward the underlying 90% probability over time rather than jumping around a single random value every second.

Per-edge bars reveal what the global ring average hides

The four .edge-row bars each compute their own hits / total percentage independently. Because every edge draws from the same 90% hit probability in this demo, they trend similarly, but in production this is exactly where regional cache configuration problems surface — an edge location with a stale cache-control policy or a recently added origin region can show a materially worse ratio than the global average while the ring alone stays reassuringly green.

Numbers formatted for scanability at scale

hitVal and missVal use .toLocaleString() rather than raw digit strings, so accumulated counts read as "12,480" instead of "12480" once the running totals grow past a few thousand over a long-running dashboard session.