Countdown

An animated countdown clock with various options set via data attributes. Also scales down if too wide for container.

Use data-deadline="2025-09-15T10:00:00.000+01:00" (for example) to set the target time.

Use data-columns="d|h|m|s" (for example) to set the column layout.

Use the countdown--lg modifier class for a large countdown.

Use the countdown--sm modifier class for a small countdown.

Use the countdown--flip modifier class to change the animation style to flip-boards.

Large Countdown in resizable DIV for auto-scaling testing.
Date set to 10am on 15th September 2025, British Summer Time. Format is 'd|h|m|s'.

Large countdown with extra 'countdown--flip' class.

Default countdown to 10am on 15th September 2025, British Summer Time. Format is 'h|m|s'.

Default countdown to 10am on 15th September 2025, British Summer Time. Format is 'm|s'.

Small countdown to 10am on 15th September 2025, British Summer Time. Format is 's'.