GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

CSS Countdown Timer: 9 Clocks That Drain and Flip

· Godrich · 9 items · 33 min read

Dashboard UIVanilla JSSCSSAutoplayDashboardContent pipeline

A css countdown timer is felt as the speed at which a shape shrinks before the number is read — scene 01's ring and scene 03's sand set that speed by

Run All Nine Countdown Timers Right on This Page

A Draining Ring Whose Color Follows the Remaining Fraction and Pulses in the Final Stretch01 cd-ring-drain-hue-shift A Flip Digit Card Whose Shadow Turns With the Hinge Angle02 cd-flip-digit-hinge-shadow An Hourglass That Counts Time With Grains Squeezing Through the Neck and Piling Up03 cd-hourglass-sand-grains A Countdown Where the Burning Point Walks Along the Fuse Length and Throws Sparks04 cd-fuse-burn-spark-trail A Dial Whose Needle Bounces at Every Tick Mark While the Swept Sector Fills In05 cd-dial-sweep-tick-overshoot Odometer Digits That Blur the Faster the Strip Spins and Carry Over in a Chain06 cd-odometer-strip-motion-blur A Liquid Tank Timer That Sloshes While the Level Drops and Settles Once It Stops07 cd-liquid-tank-slosh-level A Seven-Segment LED Countdown Whose Switched-Off Segments Leave a Glow08 cd-seven-segment-phosphor-glow A Launch Countdown Scene Where a Shockwave Spreads at Every Number and Ignition Fires at Zero09 cd-launch-sequence-shockwave-hero

Auto-plays · click a tile to jump to its section · all nine in one zip

CSS Countdown Timer: 9 Clocks Where Decay, Springs and Path Length Make Time Visible

Each scene is a stage (480×300 in the render capture) holding a display area and a button row stacked vertically, 8px apart. The stage padding is clamp(8px, 4vw, 24px), which comes to 19.2px at 480 wide, and the display area is at most 196px tall, shrinking to 126px on a 320×200 screen. The two buttons, start/pause and reset, sit side by side at 36px tall, and the probe measured each at 60px wide.

None of the nine scenes asks the clock for the date. Each one adds the gap between two requestAnimationFrame timestamps into elapsed and derives the remaining time from that. The autoplay loop runs the total time plus a hold, shows zero for a moment, and starts over, and the first press on any button ends the loop so that later runs go once. One autoplay lap is 1500ms plus a 300ms hold in 01, 03, 04, 06 and 07, twelve 150ms steps in 02 and 08, ten 150ms steps in 05, and three 450ms steps in 09.

There is one thing about the displayed time that you should know first. Scenes 02, 05, 08 and 09 squeeze each "second" into a short step during autoplay and switch to true 1000ms steps the moment you press a button, while 01, 03, 04, 06 and 07 show the real length in seconds with one decimal and no speed-up. So in four scenes the rhythm you see in the autoplay is not the rhythm you get when you run it by hand.

The order follows where the shrinking shape comes from. In 01 the arc length is the remaining fraction itself, 02 and 05 integrate a spring equation directly, and 03, 04 and 09 roll particles or stars from a fixed-seed random generator. Scene 06 is a strip of digits, 08 is segment brightness, and 07 pulls wave amplitude out of the level change. Start at 01 for a kitchen or exam clock, at 02 or 09 for an event opening, and at 03 for a focus timer. If you care more about numbers counting up, open 9 CSS Number Counter Animations — Copy-Paste Ready beside it, for a value drawn as a gauge try 9 CSS Progress Bar Circle Gauges, Copy-Paste Ready, and for a loader with an expiry time there is QR Code Loading Animation — 9 CSS Expiry Patterns.

The table copies the values from 측정.json, taken from 24 captured frames per scene, with motion counted from the difference between neighboring frames. Only 02 and 03 stay under 10% area, 01 moved in 20 of 23 frame gaps and 02 in 22, and the other seven moved in all 23.

Scene Cumulative area Mean intensity Frames that moved
01 Ring 32.4% 59.4 20/23
02 Flip card 5.2% 110.0 22/23
03 Hourglass 3.7% 177.8 23/23
04 Fuse 57.0% 32.9 23/23
05 Dial 15.0% 132.7 23/23
06 Odometer 33.6% 101.1 23/23
07 Liquid tank 26.9% 137.4 23/23
08 Seven-segment 46.8% 43.9 23/23
09 Launch scene 47.1% 82.1 23/23

Code for Each Technique Behind a Countdown Timer in HTML, CSS and JavaScript

Every snippet below is an unbroken run of lines from the <script> in that scene's index.html, 25 lines or fewer. If you are comparing an html css js countdown timer from a pen site with these, check first which variable the remaining time comes from; here remainMs() is computed from elapsed. Anyone hunting for css code for countdown timer will find the constant names in each scene's sentences, so the const line is where to change a value.

01A Draining Ring Whose Color Follows the Remaining Fraction and Pulses in the Final Stretch

The arc length is strokeDashoffset set to the circumference 301.6 times the remaining fraction, and the same fraction runs through a linear blend called blend across three colors (mint, pale yellow, pink) to move the arc color. Below a fraction of PULSE_AT 0.4, a heartbeat curve shakes the stroke between 9 and at most 15. It fits a kitchen or exam clock, and the render logged 32.4% area, intensity 59.4 and 20/23 moving frames.

A Draining Ring Whose Color Follows the Remaining Fraction and Pulses in the Final Stretch
Open in a new tab

01 · A Draining Ring Whose Color Follows the Remaining Fraction and Pulses in the Final Stretch — Measured area 32.376% · moving frames 20/23Original by GODRICH · SCSS and React ship in the zip · See the password

TOTAL_MSRING_RPULSE_ATHUE_STOPS
    function blend(u) {
        const s = clamp(u, 0, 1) * (stops.length - 1);
        const i = Math.min(stops.length - 2, Math.floor(s));
        const f = s - i;
        const a = stops[i];
        const b = stops[i + 1];
        return a.map((v, k) => Math.round(v + (b[k] - v) * f));
    }
    // Heartbeat curve: rises twice per cycle (lub-dub). Values run from 0 to 1
    function heartbeat(ph) {
        const p = ph - Math.floor(ph);
        const lub = Math.exp(-Math.pow((p - 0.1) / 0.06, 2));
        const dub = 0.6 * Math.exp(-Math.pow((p - 0.3) / 0.07, 2));
        return Math.min(1, lub + dub);
    }

02A Flip Digit Card Whose Shadow Turns With the Hinge Angle

The upper leaf folds on a spring with STIFFNESS 2200, and the sine of the fold angle times SHADE_MAX 0.6 becomes the shadow density. Damping ratio 0.55 gives a 12.6% overshoot by the damping formula 2*0.55*sqrt(STIFFNESS), but the angle is a separate value: clamp(c.x, 0, 1.12)*180 cuts it at 1.12 times, so it tops out at 201.6°; the setTarget below freezes a half-finished fold with c.cur = c.nxt when a new digit arrives, restarts x at zero, and under reduced motion swaps the digit without folding. It suits an event-opening countdown, with 5.2% area, intensity 110.0 and 22/23 moving frames.

A Flip Digit Card Whose Shadow Turns With the Hinge Angle
Open in a new tab

02 · A Flip Digit Card Whose Shadow Turns With the Hinge Angle — Measured area 5.244% · moving frames 22/23Original by GODRICH · SCSS and React ship in the zip · See the password

FLIP_MSSTIFFNESSSHADE_MAXDEPTH_PX
    function setTarget(c, d) {
        const shown = c.flipping ? c.nxt : c.cur;
        if (shown === d)
            return;
        if (c.flipping)
            c.cur = c.nxt;
        c.nxt = d;
        if (reduce) {
            c.cur = d;
            c.flipping = false;
            return;
        }
        c.flipping = true;
        c.x = 0;
        c.v = 0;
        c.age = 0;
    }

03An Hourglass That Counts Time With Grains Squeezing Through the Neck and Piling Up

On a 96×96 cell grid a grain falls when the cell below is empty and slides diagonally down when it is blocked, and the top row of the neck lets grains pass only while the allowance allowed, computed from elapsed time, has room. The neck width NECK_W is the needed flow (600 grains in 1.5 seconds, 400 per second) divided by DROP_RATE 240, rounded up to an even count, which gives 2 cells. It fits a focus timer or a board-game turn limit, with 3.7% area, intensity 177.8 and 23/23 moving frames.

An Hourglass That Counts Time With Grains Squeezing Through the Neck and Piling Up
Open in a new tab

03 · An Hourglass That Counts Time With Grains Squeezing Through the Neck and Piling Up — Measured area 3.686% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

GRAIN_COUNTNECK_WDROP_RATETOTAL_MS
    function step(allowed) {
        stepNo++;
        for (let r = GH - 2; r >= 0; r--) {
            const ltr = ((r + stepNo) & 1) === 0;
            for (let k = 0; k < GW; k++) {
                const c = ltr ? k : GW - 1 - k;
                if (grid[r * GW + c] === 0)
                    continue;
                if (canEnter(r + 1, c, allowed)) {
                    move(r, c, r + 1, c);
                    continue;
                }
                const first = rand() < 0.5 ? -1 : 1;
                if (canEnter(r + 1, c + first, allowed) && inside(r, c + first))
                    move(r, c, r + 1, c + first);
                else if (canEnter(r + 1, c - first, allowed) && inside(r, c - first))
                    move(r, c, r + 1, c - first);
            }
        }
    }
    function allowedAt(ms) {
        return Math.floor(GRAIN_COUNT * clamp(ms / totalMs, 0, 1) + 1e-6);
    }

04A Countdown Where the Burning Point Walks Along the Fuse Length and Throws Sparks

The scene skips getPointAtLength: buildPath samples 181 points itself, keeps the running length s at each one, and builds a normal from the two neighbors, and the burning length is PATH_LEN 262.5 times the elapsed fraction. A pool of 56 embers scatters from that point within ±1.1 radians of the normal, the burnt stretch is drawn as a dark line, and the rest of the rope is dashed. It suits a pre-game flourish or a quiz time limit, and its 57.0% area is the widest of the nine, with intensity 32.9 and 23/23 moving frames.

A Countdown Where the Burning Point Walks Along the Fuse Length and Throws Sparks
Open in a new tab

04 · A Countdown Where the Burning Point Walks Along the Fuse Length and Throws Sparks — Measured area 57.0% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

PATH_LENEMBER_NBURN_MSSPARK_SPREAD
    function buildPath() {
        const N = 180;
        const pts = [];
        let len = 0;
        for (let i = 0; i <= N; i++) {
            const t = i / N;
            const x = 14 + t * 172;
            const y = 50 + 30 * Math.sin(t * Math.PI * 3.4) * (1 - 0.2 * t);
            if (i > 0)
                len += Math.hypot(x - pts[i - 1].x, y - pts[i - 1].y);
            pts.push({ x, y, nx: 0, ny: 0, s: len });
        }
        for (let i = 0; i <= N; i++) {
            const a = pts[Math.max(0, i - 1)];
            const b = pts[Math.min(N, i + 1)];
            const tx = b.x - a.x;
            const ty = b.y - a.y;
            const m = Math.hypot(tx, ty) || 1;
            pts[i].nx = -ty / m;
            pts[i].ny = tx / m;
        }
        return pts;
    }

05A Dial Whose Needle Bounces at Every Tick Mark While the Swept Sector Fills In

Each time a tick passes the needle target moves 36°, and a spring with SPRING_K 520 and DAMPING 22, integrated in 1/240-second slices, makes the needle bounce while a conic-gradient layer fills the swept angle through --a. Calculated from SPRING_K and DAMPING, the damping ratio is 0.482, so every 36° step overshoots by 6.4° (17.7%) over a 315ms damping period, which means the 150ms autoplay ticks never let the needle rest and only the real 1000ms steps let it settle. It suits a meeting clock or an interval workout, with 15.0% area, intensity 132.7 and 23/23 moving frames.

A Dial Whose Needle Bounces at Every Tick Mark While the Swept Sector Fills In
Open in a new tab

05 · A Dial Whose Needle Bounces at Every Tick Mark While the Swept Sector Fills In — Measured area 15.03% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

TICK_COUNTSPRING_KDAMPINGSECTOR_ALPHA
    function tick(dt) {
        passed = passedTicks();
        const target = passed * STEP_DEG;
        if (reduce) {
            angle = target;
            vel = 0;
            return;
        }
        let left = dt;
        while (left > 0) {
            const h = Math.min(left, 1 / 240);
            vel += (-SPRING_K * (angle - target) - DAMPING * vel) * h;
            angle += vel * h;
            left -= h;
        }
    }

06Odometer Digits That Blur the Faster the Strip Spins and Carry Over in a Chain

Three strips share the three digits of the remaining time rounded up to hundredths of a second, each strip's speed in places per second is measured every frame, and multiplying by BLUR_GAIN 0.05 gives the blur, capped at 5px. Carries arrive CARRY_DELAY 55ms later for each higher place so they roll through in a chain, and the 0.01-second place moves about 100 places per second, which pins it at the 5px blur and a 1.4 times vertical stretch while the 0.1-second place moves about 10 and gets only 0.5px. It fits a stock-left or sale-ending seconds readout, with 33.6% area, intensity 101.1 and 23/23 moving frames.

Odometer Digits That Blur the Faster the Strip Spins and Carry Over in a Chain
Open in a new tab

06 · Odometer Digits That Blur the Faster the Strip Spins and Carry Over in a Chain — Measured area 33.637% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

DIGIT_COUNTSPIN_MSBLUR_GAINCARRY_DELAY
    function tick(dt) {
        cols.forEach((c, i) => {
            const tv = targetOf(i);
            if (reduce || dt <= 0) {
                c.pos = tv;
                c.vel = 0;
                return;
            }
            const before = c.pos;
            c.pos += (tv - c.pos) * (1 - Math.exp((-dt * 1000) / SPIN_MS));
            // Strip speed: position change per frame divided by time (places / 1000ms)
            c.vel = Math.abs(c.pos - before) / dt;
        });
    }

07A Liquid Tank Timer That Sloshes While the Level Drops and Settles Once It Stops

The level falls linearly with the remaining time and never goes below MIN_LEVEL 0.16, while sloshStep multiplies each level change by GAIN 0.6 and TANK_H 100 to grow the amplitude, shrinks it by SLOSH_DAMP every frame, and clips it at AMP_MAX 18. surfaceDy stacks four standing-wave modes to draw the surface, and the wave clock keeps running during a pause, so when you pause the level stands still and only the waves die away. It suits a water reminder or a lab exercise, with 26.9% area, intensity 137.4 and 23/23 moving frames.

A Liquid Tank Timer That Sloshes While the Level Drops and Settles Once It Stops
Open in a new tab

07 · A Liquid Tank Timer That Sloshes While the Level Drops and Settles Once It Stops — Measured area 26.906% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

TANK_HWAVE_NSLOSH_DAMPDRAIN_MS
    function levelOf(rem) {
        return MIN_LEVEL + (1 - MIN_LEVEL) * (rem / totalMs);
    }
    // Grow the amplitude by the level change and shrink it by SLOSH_DAMP per frame (converted to frames at 60fps)
    function sloshStep(a, dLevel, dt) {
        const next = a * Math.pow(SLOSH_DAMP, dt * 60) + GAIN * Math.abs(dLevel) * TANK_H;
        return Math.min(AMP_MAX, next);
    }
    // Standing-wave sum: mode k has the shape sin(kπx/W) with its own time phase
    function surfaceDy(x, a, t) {
        let y = 0;
        for (let k = 1; k <= WAVE_N; k++) {
            y += (a / k) * Math.sin((k * Math.PI * x) / TANK_W) * Math.cos(t * (9 + 5 * k) + k * 1.3);
        }
        return y;
    }

08A Seven-Segment LED Countdown Whose Switched-Off Segments Leave a Glow

Every segment carries its own brightness b, which jumps to OVERDRIVE 1.45 when the segment lights and settles to 1 through approach, and which shrinks by DECAY 0.84 every frame after the segment turns off to leave a cooling phosphor tail. Calculated from DECAY, a lit brightness of 1 takes 17.2 frames at 60fps, about 286ms, to fall under 0.05 after switch-off (0.05 is my yardstick, not a source constant; the source cuts to 0 at b < 0.004), and the summed brightness also spreads as a box-shadow around the plate. It fits a retro scoreboard or an appliance display, with 46.8% area, intensity 43.9 and 23/23 moving frames.

A Seven-Segment LED Countdown Whose Switched-Off Segments Leave a Glow
Open in a new tab

08 · A Seven-Segment LED Countdown Whose Switched-Off Segments Leave a Glow — Measured area 46.838% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

SEG_ONDECAYOVERDRIVEGLOW_PX
    // Brightness b: jumps to OVERDRIVE on switch-on, settles to SEG_ON, and shrinks by DECAY every frame once off
    function tick(dt) {
        const w = wanted();
        digits.forEach((segs, d) => {
            const mask = MASKS[w[d]];
            segs.forEach((s, k) => {
                const on = mask.indexOf(NAMES.charAt(k)) >= 0;
                if (reduce) {
                    s.b = on ? SEG_ON : 0;
                }
                else if (on) {
                    if (!s.on)
                        s.b = OVERDRIVE;
                    s.b = approach(s.b, SEG_ON, 0.16, dt);
                }
                else {
                    s.b *= Math.pow(DECAY, dt * 60);
                    if (s.b < 0.004)
                        s.b = 0;
                }
                s.on = on;
            });
        });
    }

09A Launch Countdown Scene Where a Shockwave Spreads at Every Number and Ignition Fires at Zero

At each change of the number a ring grows to WAVE_R 120 while fading, computed straight from the time, and the frame shakes on vnoise value noise around a base of SHAKE_AMP 5px. At zero tick raises the star speed target to 120, which is STAR_BOOST 3 times the base 40, and the speed closes 12% of the gap each frame to reach 90% in about 300ms. It fits a product-reveal landing page or an opening-event hero, with 47.1% area, intensity 82.1 and 23/23 moving frames.

A Launch Countdown Scene Where a Shockwave Spreads at Every Number and Ignition Fires at Zero
Open in a new tab

09 · A Launch Countdown Scene Where a Shockwave Spreads at Every Number and Ignition Fires at Zero — Measured area 47.081% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

COUNT_FROMWAVE_RSHAKE_AMPSTAR_BOOST
    function shownCount() {
        return Math.ceil(remainMs() / secondMs - 1e-6);
    }
    function resetState() {
        speed = 40;
    }
    function tick(dt) {
        if (reduce)
            return;
        const ignited = shownCount() === 0;
        const target = 40 * (ignited ? STAR_BOOST : 1);
        speed = approach(speed, target, 0.12, dt);
        for (let i = 0; i < STAR_N; i++) {
            sy[i] += (speed * sz[i] * dt) / 100;
            if (sy[i] > 1.05) {
                sy[i] -= 1.1;
                sx[i] = rand();
            }
        }
    }

Where the Values Change the Feel — Total Time, Grain Count, Slosh Damping

Three values in these clocks change the impression more than any others. The numbers below come from calling the constants and functions such as sloshStep in node directly, so none of them is a number read off the screen by eye.

Halving the total time leaves room for only one heartbeat

Cutting TOTAL_MS in 01 from 1500 to 750 doubles the arc's shrink speed from 201 to 402 per second on a circumference of 301.6. The final pulse zone shrinks from 600ms to 300ms while the pulse period PULSE_MS stays at 300, so two beats become one. The color passes through the same hues at the same fractions, but the trip from mint to pink takes half the time.

More grains widen the neck and raise the pile

Raising GRAIN_COUNT in 03 from 600 to 1400 lifts the needed flow from 400 to 933 grains per second, so the neck width is computed as 4 cells instead of 2 and the pile below grows from 27 rows to 36. The last grain crosses the top row of the neck at 1533ms instead of 1504ms, a small slip that leaves the total close to 1500ms.

A higher damping factor pushes the waves toward the cap and keeps them longer

Raising SLOSH_DAMP in 07 from 0.92 to 0.97 grows the amplitude while the level drops from 7.0 to 17.9, just under the cap of 18, and the largest surface deviation goes from 11 to 27. The time for the amplitude to settle under 5% after a pause stretches from 600ms to 1650ms.

Where It Breaks — A Paused Tab, Going Below Zero, Reduced-Motion Settings

A returning tab makes the clock jump while the physics takes one step

elapsed adds the whole gap of the frame that comes back, so the remaining time jumps straight to the right value. The physics step is cut with Math.min(raw, 50)/1000 so nothing leaps at once, and 02 folds only once and lands on the final digit.

The sand in 03 can fall behind the clock

In a direct node call, the sand crosses the top row of the neck 4ms later than the allowed moment at 600 grains and 33ms later at 1400. When the frame rate drops below 20fps, the limit of 12 steps per frame and the 50ms cap make the sand lag behind the clock, and a grain count above the capacity of the upper chamber (2302 with a 2-cell neck, 2348 with 4, also from the node call) makes the allowance larger than the real grain count. The grid is fixed at 96×96, so resizing the window leaves the resolution unchanged.

Times beyond two or three digits run out of places

When COUNT_FROM in 08 is 100 or more, MASKS[10] is undefined and mask.indexOf throws, and two cells can only show up to 99. Scene 06 shows three digits, so past 9.99 seconds it is one place short, because nothing sits above the seconds place, so DIGIT_COUNT and the digit division in targetOf have to change together. Scene 07 keeps 16% of the water at time zero because of MIN_LEVEL 0.16, so it never looks fully empty.

Autoplay speed and a real one-second step have different rhythms

The 150ms autoplay tick in 05 is half the 315ms damping period, so the needle never rests, and only the real mode lets it settle at every tick. In 09 WAVE_MS 420 is shorter than the 450ms autoplay step, so one ring shows at a time, while a real 1000ms step leaves 580ms empty after each ring and the stars keep running at 120 after the end. In 02 FLIP_MS 140 is only 10ms short of the 150ms step, so a shorter step brings the next digit before the fold ends and it looks as if a digit was skipped.

Values where a cap or pool size bites first

Raising BLUR_GAIN in 06 leaves the blur stuck at 5px. The amplitude in 07 is clipped at AMP_MAX 18, so a damping factor above 0.97 flattens the wave crests. The sparks in 04 are a fixed pool of 56, so an emission rate above EMBER_N overwrites live particles, and a pause stops new sparks while the ones in the air still fall to the end.

Reduced motion starts the clock stopped and draws once every 250ms

With prefers-reduced-motion: reduce on, all nine scenes start stopped, and once you press start the time runs but drawing is skipped whenever ts - lastDraw < 250. Scene 02 swaps the digit without folding, 03 shows the result of running step in one burst up to the allowance with no falling, and 04 and 09 draw no particles or shockwave. In 05 and 06 the needle and strips go straight to the target, 07 has amplitude 0 and a flat surface, and 08 has brightness 1 when on and 0 when off. In a browser with the setting on, the values read 1.4 seconds after start went from 1.5 to 0.3 seconds in 01, 03, 04 and 07, from 10 to 9 in 05, from 3.0 to 1.8 in 09 and from 12 to 11 in 02, while 06 and 08 draw with strip positions and SVG brightness rather than text, so they were checked only in the source lines (pos = tv, b = on ? 1 : 0).

Change one value at a time to find the edge

Change TOTAL_MS in 01, GRAIN_COUNT in 03 and SLOSH_DAMP in 07 one by one and the figures above shift in front of you. The archive you download opens with pu69hb35 and holds a vanilla/ folder, a react/ folder, prompt.md and README.md.

Three Variants and Accessibility

Name Value Feel
Total time 01 TOTAL_MS 1500 → 750 The arc's shrink speed doubles from 201 to 402 per second and only one heartbeat fits instead of two.
Grain count 03 GRAIN_COUNT 600 → 1400 The neck widens from 2 cells to 4, the pile rises from 27 rows to 36, and the last grain passes 33ms later.
Slosh damping 07 SLOSH_DAMP 0.92 → 0.97 The amplitude grows from 7.0 to 17.9 and the settling time after a pause goes from 600ms to 1650ms.

The numbers in this table come from the same node calls as the three sections above.

Each scene has exactly two native <button> elements, and the files hold no keydown, preventDefault or touch-action line, so Enter and Space are left to the browser's default button behavior. In a probe, one Space press changed the button text from "Pause" to "Start", flipped aria-pressed from true to false and wrote "Paused" into the status line. The element that carries the number has role="timer" in all nine scenes, and each scene has one aria-live status line that is written only when the clock pauses or ends ("Time is up"), so it is not read out every second. Six scenes (01, 03, 04, 05, 07 and 09) carry role="img", while 02, 06 and 08 are read through the aria-label on the role="timer" element. The focus ring is a 2px outline from :focus-visible, and horizontal and vertical overflow at 320×200 is 0 in all nine. The reduced-motion behavior follows the media query described in the prefers-reduced-motion documentation.

Is a CSS-Only Countdown Timer Enough?

A css countdown clock built from CSS alone is enough when the remaining time needs no readable number and there is no pause or reset button, which makes it decoration. Writing it in script pays off once a screen needs a number and a pause, yet these nine scenes hold zero transition rules and zero @keyframes, and every value is computed from elapsed inside requestAnimationFrame, because that keeps pause, reset, the jump after a tab returns and the autoplay speed-up in one place. For numbers that count up, 9 CSS Number Counter Animations — Copy-Paste Ready is nearer, for clock hands there is HTML CSS JS Analog Clock: 9 Faces, Hands to Gears, and for grains rolled on a grid as in 03, Falling Sand Simulator, 9 Ways (No Library) goes on from there. The drawing principle for the four canvas scenes (03, 04, 07 and 09) is in the canvas animation tutorial, and the timestamp the loop receives is described in the requestAnimationFrame documentation.

Frequently Asked Questions Before Reusing a CSS Countdown Clock Code

Can I get css code for countdown timer behavior without any JavaScript?

These scenes keep time in JavaScript, so they cannot be reduced as they are. The 01 arc length and color come from one fraction and the 05 sector is already a conic-gradient driven by --a, but I have not tried switching these to run without JavaScript in this post, so treat that as a direction to test rather than a recipe.

Where do I change the total time?

It is TOTAL_MS in 01, 03 and 06, BURN_MS in 04 and DRAIN_MS in 07, while 02, 08 and 09 take COUNT_FROM (the number of seconds) and 05 takes TICK_COUNT. Keep 06 under 9.99 seconds and 08 at 99 or below.

How does it look on a small phone?

The display height is min(calc(100vh - 2 * clamp(8px, 4vw, 24px) - 48px), 196px), which comes to 126px at 320×200, and overflow is 0. Scene 03 keeps its fixed 96×96 grid, so only the cells get smaller and the grain count stays the same.

Enter the archive password

The password is inside this article. You will find it as you read.