Reconnecting Countdown Loader
A 'Reconnecting in 3s' pill where the number ticks down 3, 2, 1 while a tiny ring empties once per second. The digits are stepped content, the ring is one stroke-dashoffset.
Also known as: retry countdown, reconnecting indicator, countdown timer text.
HTML
<div class="ldr-reconnecting-countdown" role="status" aria-label="Reconnecting"> <svg class="ldr-reconnecting-countdown-ring" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7.5"/><circle class="ldr-reconnecting-countdown-time" cx="10" cy="10" r="7.5" pathLength="100"/></svg> <span aria-hidden="true">Reconnecting in <b class="ldr-reconnecting-countdown-n"></b>s</span> </div>
CSS
.ldr-reconnecting-countdown {
--s: var(--ldr-size, 48px);
--c: var(--ldr-color, #3b82f6);
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.5em 1em 0.5em 0.7em;
border-radius: 2em;
background: color-mix(in srgb, var(--ldr-color, #3b82f6) 10%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
font: 500 calc(var(--s) / 3) / 1.2 system-ui, sans-serif;
color: color-mix(in srgb, currentColor 80%, transparent);
}
.ldr-reconnecting-countdown-ring {
width: 1.25em;
height: 1.25em;
fill: none;
stroke: color-mix(in srgb, var(--ldr-color, #3b82f6) 22%, transparent);
stroke-width: 2.6;
transform: rotate(-90deg);
}
.ldr-reconnecting-countdown-time {
stroke: var(--c);
stroke-linecap: round;
stroke-dasharray: 100;
animation: ldr-reconnecting-countdown-drain 1s linear infinite;
}
.ldr-reconnecting-countdown-n {
display: inline-block;
min-width: 0.6em;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: center;
color: var(--c);
}
.ldr-reconnecting-countdown-n::before {
content: "3";
animation: ldr-reconnecting-countdown-tick 3s steps(1, end) infinite;
}
@keyframes ldr-reconnecting-countdown-drain {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 100; }
}
@keyframes ldr-reconnecting-countdown-tick {
0% { content: "3"; }
33.333% { content: "2"; }
66.667% { content: "1"; }
100% { content: "3"; }
}
@media (prefers-reduced-motion: reduce) {
.ldr-reconnecting-countdown, .ldr-reconnecting-countdown *, .ldr-reconnecting-countdown::before, .ldr-reconnecting-countdown::after, .ldr-reconnecting-countdown *::before, .ldr-reconnecting-countdown *::after {
animation-duration: 3s;
}
}Customizing this loader
- Color: set
--ldr-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--ldr-size. Every dimension in the snippet is derived from it. Currently previewing64px. - Speed: change the duration on the
animationshorthand. Delays on the children are relative, so they keep their rhythm. - Accessibility: the root carries
role="status"and anaria-labelso screen readers announce the wait. The reduced-motion rule at the end slows the animation for users who asked for less motion.