Countdown

Display time remaining with various styles and animations

Basic

Control the displayed value by updating the '--value' CSS variable with JS (range: 0-99) ex:


let countdownValue = 60;
const countdownElement = document.querySelector('.countdown span');

// Update every second
const interval = setInterval(() => {
    countdownValue = Math.max(0, countdownValue - 1);
    
    if (countdownValue === 0) {
        countdownValue = 60; // Reset
    }    
    countdownElement.style.setProperty('--value', countdownValue);
}, 1000);

Basic Countdown

Preview Code Auto

Span(
    Span(style="--value:59;", **{"data-countdown": "true"}),
    cls='countdown'
)

Large text

Preview Code Auto

Span(
    Span(style="--value:59;", **{"data-countdown": "true"}),
    cls='countdown font-mono text-6xl'
)

Clock Style

Preview Code Auto

hms

Span(
    Span(style="--value:10;"), "h",
    Span(style="--value:24;"), "m",
    Span(style="--value:59;", **{"data-countdown": "true"}), "s",
    cls='countdown font-mono text-2xl'
)

Clock with colons

Preview Code Auto

Span(
    Span(style="--value:10;"), ":",
    Span(style="--value:24;"), ":",
    Span(style="--value:59;", **{"data-countdown": "true"}),
    cls='countdown font-mono text-2xl'
)

Labeled

Labeled inline

Preview Code Auto

days

hours

min

sec

units = [(15, "days"), (10, "hours"), (24, "min"), (59, "sec")]
Div(
    *(Div(
        Span(
            Span(
                style=f"--value:{value};",
                **{"data-countdown": "true"} if unit == "sec" else {}
            ),
            cls='countdown font-mono text-4xl'
        ),
        unit
    ) for value, unit in units),
    cls='flex gap-5'
)

Labeled under

Preview Code Auto

days

hours

min

sec

units = [(15, "days"), (10, "hours"), (24, "min"), (59, "sec")]
Div(
    *(Div(
        Span(
            Span(
                style=f"--value:{value};",
                **{"data-countdown": "true"} if unit == "sec" else {}
            ),
            cls='countdown font-mono text-5xl'
        ),
        unit,
        cls='flex flex-col'
    ) for value, unit in units),
    cls='grid auto-cols-max grid-flow-col gap-5 text-center'
)

In boxes

Preview Code Auto

days

hours

min

sec

units = [(15, "days"), (10, "hours"), (24, "min"), (59, "sec")]
Div(
    *(Div(
        Span(
            Span(
                style=f"--value:{value};",
                **{"data-countdown": "true"} if unit == "sec" else {}
            ),
            cls='countdown font-mono text-5xl'
        ),
        unit,
        cls='bg-neutral rounded-box text-neutral-content flex flex-col p-2'
    ) for value, unit in units),
    cls='grid auto-cols-max grid-flow-col gap-5 text-center'
)

Class Reference

Class	Type	Description
countdown	Component	Base countdown container

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo