SLA Countdown Badge — Free Support Ticket Response-Time Countdown

Support and incident tools live or die on whether an SLA deadline is visible at a glance, and this badge is built for exactly that: a live countdown to a response-time deadline that changes color as urgency increases, then keeps running into negative time with a distinct, unmistakable style once the deadline has passed. It's the pattern behind the small red timer chip on every serious ticketing and on-call tool.

A single deadline drives everything

The whole widget is a function of one deadline timestamp and a TOTAL_MS SLA window (30 minutes here, matching a P1 response target). render(), called every second, computes remainingMs = deadline - Date.now() and derives everything else from it — the formatted countdown text, the progress bar's fill percentage, and which urgency band applies. There's no separate state to keep in sync; moving the deadline is the only thing any control needs to do.

Three bands, one classify function

classify() turns elapsed-time percentage into a band name: green below 50% elapsed, amber from 50-80%, red above 80%, and overdue once remainingMs crosses zero. Because the bands are computed from a continuous percentage rather than hardcoded time thresholds, the same logic scales correctly whether the SLA window is 30 minutes or 4 hours — swap TOTAL_MS and the color transitions still land at the right relative points.

Overdue is a different state, not just "more red"

Crossing zero doesn't just turn the badge a darker shade of red — formatDuration() keeps formatting negative durations with a leading minus sign, so the badge visibly counts *up* past the deadline (-03:12, -03:13...), and a distinct overdue CSS class adds a pulsing glow animation that the red band alone doesn't have. That distinction matters operationally: "12 minutes overdue and climbing" is a different signal than "12 minutes left and red," and the UI should never blur the two.

A progress bar that mirrors the badge

The horizontal track fill shares the exact same band classes and color logic as the badge text, so a manager scanning a row of these badges can read urgency from the bar's color and length alone, without needing to read the digits. Pair this with an on-call schedule rotation to show who owns the response, or a status dashboard for a fleet of tickets at once.

Customizing it

Change TOTAL_MS per priority tier (P1 vs P3 have very different SLA windows), wire the deadline to a real ticket-creation timestamp plus an SLA policy lookup, or add a browser notification when a badge crosses into the red band.