countdown timer progress-bar scarcity urgency conversion early-bird countdown timer progress bar scarcity urgency spots early-bird conversion countdown timer with spots claimed progress bar urgency timer with scarcity indicator early bird offer countdown
Countdown With Progress Bar
Fetch pattern JSON:
curl https://webspire.de/patterns/countdown/with-progress-bar.json with-progress-bar.html
<section class="ws-countdown bg-[var(--ws-color-bg)] py-20">
<div class="mx-auto max-w-3xl px-6 text-center">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-color-accent)]">Limited offer</p>
<h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-color-text)] sm:text-4xl">Early bird offer ends in</h2>
<p class="mt-4 text-base text-[var(--ws-color-text-soft)]">Lock in your founding member price before the timer runs out.</p>
<!-- Countdown timer -->
<div class="mt-10 flex items-end justify-center gap-4 sm:gap-6">
<div class="flex flex-col items-center gap-2">
<div class="flex h-20 w-20 items-center justify-center rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] shadow-sm">
<span class="text-4xl font-black tabular-nums text-[var(--ws-color-text)]">03</span>
</div>
<span class="text-xs font-medium uppercase tracking-widest text-[var(--ws-color-text-soft)]">Days</span>
</div>
<span class="mb-8 text-3xl font-black text-[var(--ws-color-text-soft)]">:</span>
<div class="flex flex-col items-center gap-2">
<div class="flex h-20 w-20 items-center justify-center rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] shadow-sm">
<span class="text-4xl font-black tabular-nums text-[var(--ws-color-text)]">14</span>
</div>
<span class="text-xs font-medium uppercase tracking-widest text-[var(--ws-color-text-soft)]">Hours</span>
</div>
<span class="mb-8 text-3xl font-black text-[var(--ws-color-text-soft)]">:</span>
<div class="flex flex-col items-center gap-2">
<div class="flex h-20 w-20 items-center justify-center rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] shadow-sm">
<span class="text-4xl font-black tabular-nums text-[var(--ws-color-text)]">38</span>
</div>
<span class="text-xs font-medium uppercase tracking-widest text-[var(--ws-color-text-soft)]">Minutes</span>
</div>
<span class="mb-8 text-3xl font-black text-[var(--ws-color-text-soft)]">:</span>
<div class="flex flex-col items-center gap-2">
<div class="flex h-20 w-20 items-center justify-center rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] shadow-sm">
<span class="text-4xl font-black tabular-nums text-[var(--ws-color-text)]">52</span>
</div>
<span class="text-xs font-medium uppercase tracking-widest text-[var(--ws-color-text-soft)]">Seconds</span>
</div>
</div>
<!-- Progress bar -->
<div class="mt-10">
<div class="overflow-hidden rounded-full bg-[var(--ws-color-bg-secondary)] h-3">
<div class="h-3 rounded-full bg-[var(--ws-color-accent)]" style="width: 73%"></div>
</div>
<p class="mt-3 text-sm font-medium text-[var(--ws-color-text-soft)]">
<span class="font-bold text-[var(--ws-color-text)]">73 of 100 spots</span> claimed — only 27 left at this price
</p>
</div>
<!-- CTA -->
<div class="mt-10">
<a href="#" class="inline-flex items-center gap-2 rounded-xl bg-[var(--ws-color-accent)] px-8 py-3.5 text-base font-semibold text-white shadow-sm transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ws-color-accent)]">
Claim your early bird spot
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
</svg>
</a>
<p class="mt-3 text-xs text-[var(--ws-color-text-soft)]">No credit card required · Cancel anytime</p>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
countdowntimerprogress-barscarcityurgencyconversionearly-bird
Slots
| Name | Required | Description |
|---|---|---|
| eyebrow | No | Small label above the heading. |
| heading | Yes | Main urgency headline. |
| timer | Yes | Four digit units — days, hours, minutes, seconds. |
| progress | Yes | Progress bar and spots-claimed label. |
| cta | Yes | Primary call-to-action button. |
Centered countdown section with a four-unit digit timer (days / hours / minutes / seconds), a horizontal progress bar showing how many spots have been claimed, and a prominent CTA button. Combines time scarcity with social proof quantity pressure.