DNS Propagation Checker Widget — Free HTML CSS JS Snippet

After changing a DNS record, the honest answer to "is it live yet" is "it depends which resolver you ask" — propagation isn't instantaneous or uniform, it trickles out across the world's DNS resolvers over minutes to hours depending on TTLs and caching. This widget models that reality directly: instead of a single pass/fail check, it queries a list of named global resolvers one at a time with staggered, realistic delays, letting each one settle into a "resolved" state independently while an overall progress bar tracks how much of the world has caught up.

Staggered delays that mimic real geographic variance

Each resolver object carries its own delay value in RESOLVERS, deliberately spread from 600ms (Google's well-connected Iowa infrastructure) to 4100ms (a resolver on the other side of the world) rather than resolving all eight simultaneously. runCheck() schedules one setTimeout per resolver at its own delay, so the list visibly fills in from nearest/fastest to farthest/slowest — the same pattern a real propagation check exhibits, where nearby resolvers with recently-refreshed caches often update well before ones on a different continent.

A pulsing dot signals "still checking," not silence

Rows in the pending state get a resolver-dot with a pulse keyframe animation (opacity oscillating via animation: pulse 1s ease-in-out infinite), giving each unresolved row a subtle heartbeat that communicates "this is actively being checked" rather than looking stalled or broken while its timer counts down. Once a resolver's timer fires, the dot switches to solid green and the pulse animation implicitly stops (since .propagated no longer carries the pending class that triggers it).

Progress text and bar color both shift at full completion

updateProgress() writes a "X / Y resolvers" count that, only once done === total, appends " — fully propagated" and swaps the bar's gradient from indigo-purple to green via a .complete class — a single extra piece of state (full completion) gets its own distinct visual treatment rather than the bar simply reaching 100% width in the same color it always was, making the "done" moment more noticeable at a glance.

Recheck cancels in-flight timers before restarting

Clicking #recheckBtn calls timers.forEach(clearTimeout) before scheduling a fresh batch — without this, clicking recheck mid-check would leave the previous run's timers still pending, potentially firing state updates against rows that buildRows() had already replaced, or double-counting doneCount from two overlapping runs. The button also disables itself for the duration of a check, since a real DNS lookup service would reasonably rate-limit or simply be unable to serve overlapping check requests from the same client.

Row entrance uses a fade-and-rise reveal, not an instant list swap

buildRows() inserts all rows with opacity: 0 and adds the .shown class inside a requestAnimationFrame callback, the same two-step technique used elsewhere in this library to guarantee the initial hidden state actually paints before the transition to visible begins — otherwise the browser could coalesce both style writes and skip the fade-in entirely.