Interactive

Countdown Timer

A live countdown to a target date and time.

Live demo

See it in action

-- Days
-- Hours
-- Minutes
-- Seconds

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section>
	<div class="fw-container">
		<div class="fw-row">
			<div class="fw-col-12">
				<div class="fw-countdown fw-countdown--center" data-target="4102444799000" data-oncomplete="message">
					<div class="fw-countdown__units">
						<div class="fw-countdown__unit" data-unit="days">
							<span class="fw-countdown__num">--</span>
							<span class="fw-countdown__label">Days</span>
						</div>
						<div class="fw-countdown__unit" data-unit="hours">
							<span class="fw-countdown__num">--</span>
							<span class="fw-countdown__label">Hours</span>
						</div>
						<div class="fw-countdown__unit" data-unit="minutes">
							<span class="fw-countdown__num">--</span>
							<span class="fw-countdown__label">Minutes</span>
						</div>
						<div class="fw-countdown__unit" data-unit="seconds">
							<span class="fw-countdown__num">--</span>
							<span class="fw-countdown__label">Seconds</span>
						</div>
					</div>
					<div class="fw-countdown__done" style="display:none">
						This event has ended.
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

To learn more about the Countdown Timer shortcode, please check out the online manual here.

Free & open source

Build with this element, free.

Install the framework and the Bootstrap 5 theme, then drag this element into any page.

Get the framework free