Free tool
A countdown to launch day.
Pick the launch moment, the words and the colours, and see the countdown run. Then copy one snippet of HTML, CSS and script into your page. It needs no account, no files and nothing from Waitlark.
It runs in your browser. Nothing you type is sent or stored.
Preview
Countdown to launch
We’re live!
Code to paste
<!-- Launch countdown: no external files, no cookies, no tracking. Made with waitlark.com/tools/launch-countdown -->
<div class="wlc" data-wlc="qc6xy4" data-end="2026-11-28T09:00:00Z" lang="en-GB">
<p class="wlc-title">Countdown to launch</p>
<div class="wlc-units" aria-hidden="true" hidden>
<div class="wlc-unit"><span class="wlc-num" data-n="d">00</span> <span class="wlc-label">Days</span></div>
<div class="wlc-unit"><span class="wlc-num" data-n="h">00</span> <span class="wlc-label">Hours</span></div>
<div class="wlc-unit"><span class="wlc-num" data-n="m">00</span> <span class="wlc-label">Minutes</span></div>
<div class="wlc-unit wlc-secs"><span class="wlc-num" data-n="s">00</span> <span class="wlc-label">Seconds</span></div>
</div>
<p class="wlc-live" aria-live="polite" aria-atomic="true"></p>
<p class="wlc-done" hidden>We’re live!</p>
<p class="wlc-date"><time datetime="2026-11-28T09:00:00Z">Saturday, 28 November 2026 at 10:00 CET</time></p>
</div>
<style>
[data-wlc="qc6xy4"] { position: relative; box-sizing: border-box; max-width: 36rem; margin: 0 auto; padding: 24px 16px; border-radius: 16px; background: #fff3e2; color: #1b1530; font: inherit; line-height: 1.4; text-align: center; }
[data-wlc="qc6xy4"] * { box-sizing: border-box; }
[data-wlc="qc6xy4"] p { margin: 0; }
[data-wlc="qc6xy4"] [hidden] { display: none !important; }
[data-wlc="qc6xy4"] .wlc-title { font-size: 1.1em; font-weight: 700; }
[data-wlc="qc6xy4"] .wlc-units { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0; }
[data-wlc="qc6xy4"] .wlc-unit { min-width: 4em; padding: 12px 6px 10px; border-radius: 12px; background: #1b1530; color: #fff3e2; }
[data-wlc="qc6xy4"] .wlc-num { display: block; font-size: 2em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
[data-wlc="qc6xy4"] .wlc-label { display: block; margin-top: 6px; font-size: 0.75em; }
[data-wlc="qc6xy4"] .wlc-done { margin: 12px 0; font-size: 1.5em; font-weight: 700; }
[data-wlc="qc6xy4"] .wlc-date { margin-top: 8px; font-size: 0.9em; }
[data-wlc="qc6xy4"] .wlc-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: no-preference) { [data-wlc="qc6xy4"] .wlc-tick { animation: wlc-qc6xy4 0.35s ease-out; } }
@keyframes wlc-qc6xy4 { from { opacity: 0.3; transform: translateY(-0.15em); } to { opacity: 1; transform: none; } }
</style>
<script>
(function () {
function pad(n) { return (n < 10 ? '0' : '') + n; }
function unit(lang, u, n, label) {
try { return new Intl.NumberFormat(lang, { style: 'unit', unit: u, unitDisplay: 'long' }).format(n); }
catch (e) { return n + ' ' + label; }
}
function list(lang, items) {
try { return new Intl.ListFormat(lang, { type: 'conjunction' }).format(items); }
catch (e) { return items.join(', '); }
}
function start(el) {
el.setAttribute('data-wlc-on', '');
var end = Date.parse(el.getAttribute('data-end'));
if (isNaN(end)) return;
var lang = el.getAttribute('lang') || 'en';
var q = function (s) { return el.querySelector(s); };
var title = q('.wlc-title'), units = q('.wlc-units'), secs = q('.wlc-secs');
var live = q('.wlc-live'), done = q('.wlc-done');
var calm = window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : null;
var said = '', ready = false;
units.hidden = false;
function show(k, v) {
var n = q('[data-n="' + k + '"]');
if (n.textContent === v) return;
n.textContent = v;
if (!ready) return;
n.classList.remove('wlc-tick');
void n.offsetWidth;
n.classList.add('wlc-tick');
}
function label(k) { return q('[data-n="' + k + '"]').nextElementSibling.textContent; }
function tick() {
var left = end - Date.now();
if (left <= 0) {
title.hidden = true;
units.hidden = true;
done.hidden = false;
live.textContent = done.textContent;
return;
}
var withSecs = !!secs && !(calm && calm.matches);
if (secs) secs.hidden = !withSecs;
var t = withSecs ? Math.ceil(left / 1000) : Math.ceil(left / 60000) * 60;
show('d', pad(Math.floor(t / 86400)));
show('h', pad(Math.floor(t % 86400 / 3600)));
show('m', pad(Math.floor(t % 3600 / 60)));
if (withSecs) show('s', pad(t % 60));
var mins = Math.ceil(left / 60000), parts = [];
if (mins >= 1440) parts.push(unit(lang, 'day', Math.floor(mins / 1440), label('d')));
if (mins % 1440 >= 60) parts.push(unit(lang, 'hour', Math.floor(mins % 1440 / 60), label('h')));
if (mins % 60) parts.push(unit(lang, 'minute', mins % 60, label('m')));
var text = title.textContent.replace(/[\s:]+$/, '') + ': ' + list(lang, parts);
if (text !== said) { live.textContent = text; said = text; }
ready = true;
setTimeout(tick, left % 1000 + 20);
}
tick();
}
function all() {
var els = document.querySelectorAll('[data-wlc]:not([data-wlc-on])');
for (var i = 0; i < els.length; i++) start(els[i]);
}
all();
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', all);
})();
</script>
Paste it where your site builder accepts custom HTML. HTML, CSS and script are all in it: no files to upload and nothing that loads from elsewhere.
In Waitlark
Every hosted waitlist page can show a countdown to launch day, in the project’s brand, without any code.
Hosted pages in Waitlark →How the countdown works
The snippet has three parts. The HTML holds the heading, the launch date as text and an empty place for the numbers. The CSS styles only this countdown. The script fills in the numbers and keeps them current. None of it loads anything from elsewhere.
What visitors see
- Before launch
- The heading, the time left in days, hours, minutes and seconds, and the launch date with its time zone.
- After launch
- Your end message and the launch date.
- Without JavaScript
- The heading and the launch date as text. No empty boxes and no zeros.
Time zones
The generator turns your date, time and time zone into one moment in UTC and writes that into the snippet. A visitor in Tokyo and one in Toronto see the same time left. It’s counted against the visitor’s own device clock, so a clock that’s a few minutes off shows a countdown that’s off by the same amount. If you pick a time that doesn’t exist because the clocks go forward that night, the generator says so and shows the time it uses instead.
Accessible from the start
- Screen readers skip the numbers and read one sentence instead, such as “Countdown to launch: 3 days, 4 hours and 31 minutes”. It changes once a minute, so nobody is interrupted every second.
- The launch date is text in a
<time>element, so it’s there without the script too. - Visitors who ask their device for reduced motion get no animation and no seconds.
- The contrast check holds the text on the background, and the numbers and labels on the tiles, to 4.5:1. That’s the WCAG AA level for normal-sized text, and the labels under the numbers are small.
- The language sets the
langattribute, the date format and the words in the spoken sentence.
Where to paste it
Anywhere you can add custom HTML that runs a script, such as an embed or custom code block. Some site builders only run scripts on the published page, so check it there. Pasting it twice does no harm: every countdown starts once and styles only itself. If your site has a Content Security Policy that blocks inline scripts, the countdown shows the date without the numbers. Allow the script, or move it into a file on your own site.
No site yet? Every hosted waitlist page in Waitlark can show a countdown to launch day without any code.
Common questions
- Does the countdown work across time zones?
- Yes. The snippet stores the launch as one moment in UTC, worked out from the date, time and time zone you pick. Every visitor sees the same time left, wherever they are. The line under the numbers gives the launch time in the zone you picked.
- Is the countdown accessible?
- The numbers are for the eye. Screen readers get one sentence with the time left, updated once a minute, and the launch date as text. Visitors who ask their device for reduced motion get no animation and no seconds, so for them the countdown changes once a minute.
- Can I put two countdowns on one page?
- Yes. Each snippet styles only its own countdown, and the script starts every countdown on the page once. Pasting the same snippet twice doesn’t break it, and two countdowns with different colours don’t mix.
- What happens when it reaches zero?
- The heading and the numbers make way for your end message, such as “We’re live!”. Someone who opens the page after launch sees the message straight away. Take the snippet off the page when you no longer need it.
- Does the countdown track visitors?
- No. The snippet loads nothing from other sites, sets no cookies and sends nothing anywhere. The generator runs in your browser too, and nothing you type is sent to us or anyone else.
Another question? Chat with us.
Read and try next
Hosted pagesA waitlist page per project, in your brand, live in minutes.Branded formsSet your brand once in the brand studio. The form, page, emails and every other screen follow.Embed anywhereA web component, a plain HTML form that works without JavaScript, or the API.GuideLanding pageWhat a waitlist landing page needs: a clear headline, one promise, a short form, proof you can back up and what happens next. Plus what to leave out.GuideLaunch day invitesOpen up to your waitlist on launch day: invite in batches, pick who goes first, send one-time links or codes and know what to check before the next batch.GuideBuild a waitlistHow to set up a waitlist before you launch: write the promise, put up one page, keep the signup short, send the first emails and plan launch day early.Free toolWaitlist growth calculatorSee how a waitlist grows with referrals, week by week until launch, with double opt-in and the viral coefficient (K).Free toolUTM link builderTag the links you share for a launch: presets for six launch channels, clean lower-case values and a copy button.Free toolLaunch email templatesThe four waitlist emails with your product, name and launch date filled in: confirmation, welcome, update and invite, in plain text and HTML.Free toolOpen Graph previewSee how a link looks on Google, X, LinkedIn, Facebook, Slack and in chats, check title length and image size, and copy the meta tags.Free toolEmail list cleanerFind invalid, duplicate, mistyped and disposable addresses in a pasted list or a CSV, and download the clean list. Nothing is uploaded.
Early access
Early birds get in first.
Join the waitlist for Waitlark. We invite people in small groups, and waitlist members get the early-bird price.
One email to confirm, one when your invite is ready. Unsubscribe in one click. What we store.