Skip to content
STYLESCAPE

Countdown

Examples for the ss-c-countdown module.

Inline numbers

: :
HTML 
<span class="ss-c-countdown" role="img" aria-label="23 hours, 47 minutes, 12 seconds">
            <span style="--ss-countdown-value: 23"></span>:
            <span style="--ss-countdown-value: 47"></span>:
            <span style="--ss-countdown-value: 12"></span>
        </span>

Live Countdown (TypeScript-driven)

Driven by the Countdown class (src/ts/content/Countdown.ts), auto-initialized by initializeStylescape(). Set data-countdown-seconds or data-countdown-to on the container. The script gives the container role="timer" and an aria-label with the remaining time, and hides the digit columns from assistive technology.

: :
HTML 
<span
        class="ss-c-countdown"
        data-countdown-seconds="3600"
        style="font-size: 2rem"
    >
        <span data-unit="hours" style="--ss-countdown-value: 0"></span>
        :
        <span data-unit="minutes" style="--ss-countdown-value: 0"></span>
        :
        <span data-unit="seconds" style="--ss-countdown-value: 0"></span>
    </span>