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'.