30 JavaScript Countdown Timer Examples

JavaScript countdown timers are useful interactive UI components for sale pages, ecommerce campaigns, product launches, event landing pages, webinar registrations, coming soon pages, limited-time offers, checkout urgency blocks, and dashboard widgets. They help show how much time is left before an offer ends, an event starts, a launch goes live, or an important deadline expires.

In this guide, you will find 30 JavaScript countdown timer examples for real website projects, including sale countdown timers, event countdown timers, product launch timers, webinar timers, daily deal timers, checkout timers, coming soon timers, circular countdowns, flip clock timers, progress countdowns, card-based timers, sticky countdown bars, dashboard timers, responsive countdown sections, and reusable vanilla JavaScript timer components.

This post focuses on JavaScript countdown timer logic, date calculations, time remaining updates, days, hours, minutes and seconds formatting, interval handling, expired states, responsive timer layouts, sale timer UI design, and copy-paste-ready HTML, CSS, and JavaScript examples. For related UI components, you can also explore our JavaScript accordion examples, JavaScript search filter examples, JavaScript dropdown menu examples, and JavaScript slider examples.

View All 30 JavaScript Countdown Timer Examples

On this page

What Is a JavaScript Countdown Timer?
Why Countdown Timers Matter
JavaScript Countdown Timer Types
What Should a Good Countdown Timer Include?
30 JavaScript Countdown Timer Examples
JavaScript Countdown Timer Best Practices
Responsive Countdown Timer Design Tips
Common JavaScript Countdown Timer Mistakes
JavaScript Countdown Timer FAQ
Conclusion
Related JavaScript and CSS Guides

WordPress SEO Plugin

EntitySchema Pro

Build a real entity-based structured data system for WordPress, modern SEO, and AI-readable websites.

Sale price 89€

29€ Save 60€

View Plugin

What Is a JavaScript Countdown Timer?

A JavaScript countdown timer is an interactive component that calculates the time remaining until a specific date, time, offer deadline, product launch, event start, webinar, sale end, or campaign expiry. It usually displays days, hours, minutes, and seconds, then updates automatically while the visitor stays on the page.

The main purpose of a countdown timer is to make time-sensitive information clear. Instead of writing “Sale ends soon” or “Event starts next week,” a countdown timer shows the exact remaining time in a visual format that is easy to understand at a glance.

A JavaScript countdown timer can be very simple or highly advanced. A basic version may count down to one fixed date. A more advanced version may include recurring daily timers, limited-time offers, timezone-aware deadlines, animated digits, flip clock effects, circular progress, expired states, reset logic, local storage, dynamic labels, or multiple timers on the same page.

Why Countdown Timers Matter

Countdown timers matter because many website visitors need clear timing information before they take action. If a sale, registration, product launch, event, limited offer, or booking window has a deadline, a countdown timer can make that deadline more visible and easier to understand.

They highlight urgency by showing exactly how much time is left before an offer or event ends.
They improve campaign pages by making sale deadlines, launch dates, webinar times, and event registrations more visible.
They support ecommerce pages by showing flash sales, daily deals, cart reservation timers, checkout timers, and limited stock campaigns.
They improve landing page clarity by turning abstract deadlines into a clear visual UI element.
They help users make decisions when a deadline, booking window, or special offer is important to the next step.

Countdown timers should be used carefully. They work best when the deadline is real and useful. A timer should support the page message, not feel fake or manipulative. A good JavaScript countdown timer gives visitors clear information, improves the visual hierarchy, and makes the page easier to understand.

JavaScript Countdown Timer Types

There are many different types of JavaScript countdown timers. Some are simple text-based timers, while others are designed as full sale banners, checkout urgency blocks, event hero sections, product launch cards, dashboard widgets, or animated visual components.

The right countdown timer depends on the goal of the page. A sale timer should be highly visible and conversion-focused. An event timer should clearly show the event date and registration action. A dashboard timer may be compact and functional. A coming soon timer can be more visual, atmospheric, and brand-focused.

Sale countdown timers are used for flash sales, discount campaigns, limited-time promotions, and seasonal offers.
Event countdown timers show the time left before webinars, conferences, launches, workshops, and live events.
Checkout countdown timers can show cart reservation time, payment deadlines, or limited checkout offers.
Coming soon countdown timers are useful for new websites, app launches, product releases, and landing pages.
Recurring countdown timers reset daily, weekly, or monthly for repeated campaigns or scheduled availability.
Animated countdown timers use flip cards, circles, progress bars, number transitions, or motion effects to make the timer more visual.

This guide focuses on JavaScript countdown timer examples, so every demo will include visible JavaScript, HTML, and CSS code. The examples are designed to be copy-paste friendly, easy to customize, and different in layout, purpose, visual style, timer logic, and responsive behavior.

What Should a Good Countdown Timer Include?

A good JavaScript countdown timer should be accurate, readable, responsive, and visually connected to the page goal. Users should quickly understand what the timer is counting down to, how much time is left, and what action they can take before the deadline ends.

Clear deadline context

The timer should explain what happens when the countdown reaches zero, such as a sale ending, event starting, launch opening, or offer expiring.

Readable time units

Days, hours, minutes, and seconds should be easy to scan, with labels that stay readable on desktop, tablet, and mobile screens.

Automatic updates

JavaScript should update the remaining time regularly and handle expired states when the countdown reaches zero.

Strong visual hierarchy

The countdown should stand out enough to support the campaign, but it should not make the page feel messy or hard to read.

Before building a countdown timer, decide what the timer should do after it reaches zero. Should it show an expired message, hide the offer, disable a button, change the call-to-action, reset automatically, or show a new deadline? This behavior is important because a countdown timer is not only a visual element — it is part of the page logic.

Use a real deadline so the countdown feels trustworthy and useful.
Show clear labels for days, hours, minutes, and seconds.
Handle expired states when the countdown reaches zero.
Keep the timer readable with enough contrast, spacing, and font size.
Use responsive layout rules so the timer works on phones and tablets.
Keep JavaScript scoped so multiple timers can work on the same page.
Avoid fake urgency because misleading timers can damage trust.
Test timezone behavior if the deadline is important across different regions.
Use clear call-to-action text near the timer when users should take action.
Keep animation purposeful so the timer looks polished without becoming distracting.

You can combine JavaScript countdown timers with many other website UI patterns. Sale timers work well with modern CSS pricing tables, event timers can be placed inside modern website hero sections, checkout urgency timers can pair with modern CSS forms, and campaign sections can use layouts from our modern CSS layouts guide.

Now let’s look at 30 JavaScript countdown timer examples for real website projects. Each example uses a different timer layout, visual style, countdown purpose, sale campaign design, event UI, product launch pattern, checkout urgency block, dashboard widget, animated number style, expired state, or responsive countdown approach, so you can build professional time-based UI components with visible JavaScript, HTML, and CSS code.

1. Flash Sale Countdown Timer

A flash sale countdown timer is useful for ecommerce campaigns, landing pages, seasonal discounts, product promotions, and limited-time offers. It gives visitors a clear visual deadline and helps highlight when a sale period is ending.

This example uses a bold ecommerce sale banner with a strong discount badge, large countdown cards, campaign text, and a clear call-to-action button. The JavaScript uses a rolling weekly campaign cycle, so the demo keeps working in the future without showing an expired old date.

Flash sale countdown timer
Days, hours, minutes, and seconds
Future-proof rolling campaign logic
Responsive ecommerce sale banner
Large numbers that stay inside the cards

Example 01

Flash Sale Countdown Timer

Show the remaining time for a weekly flash sale, limited product offer, seasonal campaign, or ecommerce promotion.

40% OFF Limited-time ecommerce campaign

Flash Sale Sale active

00 Days

00 Hours

00 Minutes

00 Seconds

Offer ends soon. Grab the deal before the timer reaches zero.

Shop the Sale

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-one]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 7;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-01T00:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const statusEl = timer.querySelector("[data-status]");
  const cycleLabelEl = timer.querySelector("[data-cycle-label]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextCycleEnd(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateCountdown() {
    const now = Date.now();
    const nextCycleEnd = getNextCycleEnd(now);
    let remaining = nextCycleEnd - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);

    cycleLabelEl.textContent = "Sale ends this cycle";
    statusEl.textContent = "Offer ends soon. Grab the deal before the timer reaches zero.";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-one-demo">
  <div class="vb-countdown-one-sale" data-vb-countdown-one data-cycle-days="7">
    <div class="vb-countdown-one-copy">
      <span class="vb-countdown-one-kicker">Example 01</span>
      <h3>Flash Sale Countdown Timer</h3>
      <p>Show the remaining time for a weekly flash sale, limited product offer, seasonal campaign, or ecommerce promotion.</p>

      <div class="vb-countdown-one-offer">
        <strong>40% OFF</strong>
        <span>Limited-time ecommerce campaign</span>
      </div>
    </div>

    <div class="vb-countdown-one-panel">
      <div class="vb-countdown-one-panel-head">
        <span>Flash Sale</span>
        <strong data-cycle-label>Sale active</strong>
      </div>

      <div class="vb-countdown-one-timer" aria-label="Flash sale countdown timer">
        <div class="vb-countdown-one-unit">
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div class="vb-countdown-one-unit">
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div class="vb-countdown-one-unit">
          <strong data-minutes>00</strong>
          <span>Minutes</span>
        </div>

        <div class="vb-countdown-one-unit">
          <strong data-seconds>00</strong>
          <span>Seconds</span>
        </div>
      </div>

      <p class="vb-countdown-one-status" data-status>Offer ends soon. Grab the deal before the timer reaches zero.</p>

      <a class="vb-countdown-one-button" href="#shop-sale">Shop the Sale</a>
    </div>
  </div>
</div>

CSS

/* CSS is included in the live preview above. */

This flash sale countdown timer is useful for ecommerce sale sections, landing page campaigns, seasonal offers, product promotions, weekly deals, and limited-time discount banners.

2. Event Launch Countdown Timer

An event launch countdown timer is useful for conferences, webinars, workshops, online summits, livestreams, product demos, registration pages, and event landing pages. It helps visitors quickly understand when the next event begins.

This example uses a clean ticket-style layout with a vertical event date panel, event information, compact countdown cards, and a registration-focused call-to-action. The JavaScript calculates the next event in a recurring event cycle, so the example stays active in the future.

Event launch countdown timer
Ticket-style event layout
Days, hours, minutes, and seconds
Future-proof recurring event logic
Fully responsive event section

LIVE -- Event

Example 02

Event Launch Countdown Timer

Show how much time is left before the next webinar, workshop, product demo, conference, or live online event.

Live Online Event cycle active Free Registration

Next event starts in Loading next date

00 Days

00 Hours

00 Min

00 Sec

Registration is open for the next event.

Reserve Your Seat

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-two]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 14;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-05T18:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const statusEl = timer.querySelector("[data-status]");
  const nextLabelEl = timer.querySelector("[data-next-label]");
  const eventMonthEl = timer.querySelector("[data-event-month]");
  const eventDayEl = timer.querySelector("[data-event-day]");
  const eventYearEl = timer.querySelector("[data-event-year]");
  const eventCycleEl = timer.querySelector("[data-event-cycle]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextEventTime(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateEventDate(nextEventTime) {
    const eventDate = new Date(nextEventTime);
    const month = eventDate.toLocaleString("en-US", { month: "short" }).toUpperCase();

    eventMonthEl.textContent = month;
    eventDayEl.textContent = formatNumber(eventDate.getDate());
    eventYearEl.textContent = eventDate.getFullYear();
    nextLabelEl.textContent = "Next event: " + month + " " + eventDate.getDate();
    eventCycleEl.textContent = "Event schedule active";
  }

  function updateCountdown() {
    const now = Date.now();
    const nextEventTime = getNextEventTime(now);
    let remaining = nextEventTime - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);

    updateEventDate(nextEventTime);
    statusEl.textContent = "Registration is open for the next event.";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-two-demo">
  <div class="vb-countdown-two-event" data-vb-countdown-two data-cycle-days="14">
    <div class="vb-countdown-two-date">
      <span data-event-month>LIVE</span>
      <strong data-event-day>--</strong>
      <small data-event-year>Event</small>
    </div>

    <div class="vb-countdown-two-info">
      <span class="vb-countdown-two-kicker">Example 02</span>
      <h3>Event Launch Countdown Timer</h3>
      <p>Show how much time is left before the next webinar, workshop, product demo, conference, or live online event.</p>

      <div class="vb-countdown-two-meta">
        <span>Live Online</span>
        <span data-event-cycle>Event cycle active</span>
        <span>Free Registration</span>
      </div>
    </div>

    <div class="vb-countdown-two-box">
      <div class="vb-countdown-two-box-head">
        <strong>Next event starts in</strong>
        <span data-next-label>Loading next date</span>
      </div>

      <div class="vb-countdown-two-timer" aria-label="Event launch countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <p data-status>Registration is open for the next event.</p>
      <a href="#register">Reserve Your Seat</a>
    </div>
  </div>
</div>

CSS

/* CSS is included in the live preview above. */

This event launch countdown timer is useful for webinar landing pages, conference registration pages, online summits, product demos, workshop announcements, livestream events, and recurring event sections.

3. Product Launch Countdown Timer

A product launch countdown timer is useful for app releases, SaaS launches, preorder pages, startup landing pages, coming soon sections, digital product drops, and new feature announcements. It helps build anticipation and shows visitors when the product becomes available.

This example uses a futuristic product launch layout with a dark glass UI, glowing product orb, launch date badge, email signup form, and responsive countdown blocks. The demo calculates the next launch cycle dynamically, so the countdown keeps working in the future.

Product launch countdown timer
Futuristic SaaS-style launch design
Days, hours, minutes, and seconds
Email signup form
Responsive layout and readable timer numbers

Example 03

Product Launch Countdown Timer

Use a launch countdown timer for new products, app releases, SaaS features, preorder campaigns, digital products, and startup landing pages.

Next launch date loading Early access opens soon

00 Days

00 Hours

00 Minutes

00 Seconds

The product launch is coming soon. Join the waiting list before early access opens.

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-three]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 30;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-10T10:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextLaunchEl = timer.querySelector("[data-next-launch]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextLaunch(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateCountdown() {
    const now = Date.now();
    const nextLaunch = getNextLaunch(now);
    let remaining = nextLaunch - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const launchDate = new Date(nextLaunch);
    const dateText = launchDate.toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    nextLaunchEl.textContent = "Next launch: " + dateText;
    statusEl.textContent = "The product launch is coming soon. Join the waiting list before early access opens.";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-three-demo">
  <div class="vb-countdown-three-launch" data-vb-countdown-three data-cycle-days="30">
    <div class="vb-countdown-three-visual">
      <div class="vb-countdown-three-grid"></div>
      <div class="vb-countdown-three-orb">
        <span>JS</span>
      </div>
      <div class="vb-countdown-three-ring vb-countdown-three-ring-one"></div>
      <div class="vb-countdown-three-ring vb-countdown-three-ring-two"></div>
      <div class="vb-countdown-three-dot vb-countdown-three-dot-one"></div>
      <div class="vb-countdown-three-dot vb-countdown-three-dot-two"></div>
    </div>

    <div class="vb-countdown-three-content">
      <span class="vb-countdown-three-kicker">Example 03</span>
      <h3>Product Launch Countdown Timer</h3>
      <p>Use a launch countdown timer for new products, app releases, SaaS features, preorder campaigns, digital products, and startup landing pages.</p>

      <div class="vb-countdown-three-launch-meta">
        <span data-next-launch>Next launch date loading</span>
        <strong>Early access opens soon</strong>
      </div>

      <div class="vb-countdown-three-timer" aria-label="Product launch countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Minutes</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Seconds</span>
        </div>
      </div>

      <p class="vb-countdown-three-status" data-status>The product launch is coming soon. Join the waiting list before early access opens.</p>

      <form class="vb-countdown-three-form">
        <input type="email" placeholder="Enter your email" aria-label="Email address">
        <button type="button">Notify Me</button>
      </form>
    </div>
  </div>
</div>

CSS

.vb-countdown-three-demo,
.vb-countdown-three-demo * {
  box-sizing: border-box;
}

.vb-countdown-three-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 42px);
  border-radius: clamp(28px, 5vw, 58px) clamp(28px, 5vw, 58px) 14px clamp(28px, 5vw, 58px);
  background:
    radial-gradient(circle at 18% 18%, rgba(34, 211, 238, 0.18), transparent 34%),
    radial-gradient(circle at 84% 20%, rgba(168, 85, 247, 0.22), transparent 36%),
    linear-gradient(135deg, #020617 0%, #111827 52%, #1e1b4b 100%) !important;
  border: 1px solid rgba(125, 211, 252, 0.20);
  box-shadow: 0 34px 96px rgba(2, 6, 23, 0.42);
}

.vb-countdown-three-launch {
  display: grid;
  grid-template-columns: minmax(260px, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(24px, 4vw, 38px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
}

.vb-countdown-three-visual {
  position: relative;
  min-width: 0;
  min-height: clamp(320px, 44vw, 500px);
  overflow: hidden;
  border-radius: clamp(28px, 4vw, 46px) clamp(28px, 4vw, 46px) 10px clamp(28px, 4vw, 46px);
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.22), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025)) !important;
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.vb-countdown-three-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(125,211,252,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,211,252,0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
}

.vb-countdown-three-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(140px, 20vw, 196px);
  height: clamp(140px, 20vw, 196px);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.52), transparent 22%),
    linear-gradient(135deg, #22d3ee, #2563eb 52%, #a855f7) !important;
  box-shadow:
    0 0 44px rgba(34, 211, 238, 0.46),
    0 0 100px rgba(168, 85, 247, 0.30);
}

.vb-countdown-three-orb span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(40px, 7vw, 58px);
  font-weight: 950;
  letter-spacing: -0.08em;
}

.vb-countdown-three-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(125, 211, 252, 0.28);
}

.vb-countdown-three-ring-one {
  width: clamp(220px, 32vw, 320px);
  height: clamp(220px, 32vw, 320px);
}

.vb-countdown-three-ring-two {
  width: clamp(280px, 40vw, 410px);
  height: clamp(280px, 40vw, 410px);
  border-color: rgba(168, 85, 247, 0.25);
}

.vb-countdown-three-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
}

.vb-countdown-three-dot-one {
  left: 21%;
  top: 28%;
  background: #67e8f9;
  box-shadow: 0 0 24px rgba(103, 232, 249, 0.72);
}

.vb-countdown-three-dot-two {
  right: 18%;
  bottom: 25%;
  background: #c084fc;
  box-shadow: 0 0 24px rgba(192, 132, 252, 0.72);
}

.vb-countdown-three-content {
  min-width: 0;
}

.vb-countdown-three-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.12);
  border: 1px solid rgba(125, 211, 252, 0.18);
  color: #a5f3fc !important;
  -webkit-text-fill-color: #a5f3fc !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-three-content h3 {
  margin: 0 0 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(34px, 5.7vw, 76px) !important;
  line-height: 0.9 !important;
  font-weight: 950 !important;
  letter-spacing: -0.075em;
  overflow-wrap: anywhere;
}

.vb-countdown-three-content p {
  max-width: 680px;
  margin: 0 0 22px !important;
  color: #cbd5e1 !important;
  -webkit-text-fill-color: #cbd5e1 !important;
  font-size: clamp(15px, 1.7vw, 16px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-three-launch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.vb-countdown-three-launch-meta span,
.vb-countdown-three-launch-meta strong {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 900;
}

.vb-countdown-three-launch-meta span {
  background: rgba(34, 211, 238, 0.12);
  color: #a5f3fc !important;
  -webkit-text-fill-color: #a5f3fc !important;
  border: 1px solid rgba(125, 211, 252, 0.16);
}

.vb-countdown-three-launch-meta strong {
  background: rgba(168, 85, 247, 0.14);
  color: #ddd6fe !important;
  -webkit-text-fill-color: #ddd6fe !important;
  border: 1px solid rgba(196, 181, 253, 0.16);
}

.vb-countdown-three-timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 12px);
  margin-bottom: 18px;
}

.vb-countdown-three-timer div {
  min-width: 0;
  position: relative;
  overflow: hidden;
  padding: clamp(14px, 2vw, 18px) clamp(7px, 1.2vw, 10px);
  border-radius: 24px 24px 8px 24px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.vb-countdown-three-timer div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #22d3ee, #a855f7);
}

.vb-countdown-three-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 8px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(24px, 3.5vw, 44px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-three-timer span {
  display: block;
  color: #a5f3fc !important;
  -webkit-text-fill-color: #a5f3fc !important;
  font-size: clamp(9px, 1.1vw, 11px);
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vb-countdown-three-status {
  margin-bottom: 18px !important;
}

.vb-countdown-three-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 10px;
  max-width: 560px;
}

.vb-countdown-three-form input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  outline: none;
  background: rgba(255,255,255,0.10);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px;
  font-weight: 700;
}

.vb-countdown-three-form input::placeholder {
  color: rgba(226, 232, 240, 0.72);
  -webkit-text-fill-color: rgba(226, 232, 240, 0.72);
}

.vb-countdown-three-form button {
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #22d3ee, #a855f7);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 16px 38px rgba(34, 211, 238, 0.22);
}

@media (max-width: 980px) {
  .vb-countdown-three-launch {
    grid-template-columns: 1fr;
  }

  .vb-countdown-three-visual {
    min-height: 360px;
  }

  .vb-countdown-three-timer strong {
    font-size: clamp(30px, 8vw, 52px);
  }
}

@media (max-width: 700px) {
  .vb-countdown-three-content h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-three-visual {
    min-height: 310px;
    border-radius: 28px 28px 8px 28px;
  }

  .vb-countdown-three-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-three-timer strong {
    font-size: clamp(30px, 13vw, 46px);
  }

  .vb-countdown-three-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .vb-countdown-three-timer {
    grid-template-columns: 1fr;
  }
}

This product launch countdown timer is useful for SaaS launch pages, app releases, preorder pages, startup landing pages, digital product drops, feature launches, and coming soon website sections.

4. Daily Deal Countdown Timer

A daily deal countdown timer is useful for ecommerce stores, online marketplaces, product grids, homepage promotions, flash deals, and limited-time product cards. It shows how long today’s deal remains available before the next day starts.

This example uses a compact ecommerce product-card layout with a bright product visual, price block, stock meter, vertical timer strip, and deal message. The JavaScript counts down to the next local midnight, so the demo keeps working day after day.

Daily deal countdown timer
Counts down to local midnight
Product card style layout
Price, stock, and deal details
Responsive ecommerce timer design

Example 04

Daily Deal

Daily Deal Countdown Timer

Use this timer for daily ecommerce offers, marketplace deals, limited product discounts, and product cards that refresh every day.

Today only €49

Save 35%

Stock left 18 items

00 Hours

00 Min

00 Sec

Deal resets at midnight.

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-four]");
  if (!timer) return;

  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextMidnight() {
    const deadline = new Date();
    deadline.setHours(24, 0, 0, 0);
    return deadline.getTime();
  }

  function updateCountdown() {
    const now = Date.now();
    const deadline = getNextMidnight();
    let remaining = deadline - now;

    if (remaining <= 0) {
      remaining = 24 * 60 * 60 * 1000;
    }

    const hours = Math.floor(remaining / (1000 * 60 * 60));
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    statusEl.textContent = "Deal resets at midnight.";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-four-demo">
  <div class="vb-countdown-four-card" data-vb-countdown-four>
    <div class="vb-countdown-four-image">
      <span>Example 04</span>
      <div class="vb-countdown-four-product-shape">
        <i></i>
        <i></i>
      </div>
    </div>

    <div class="vb-countdown-four-info">
      <div class="vb-countdown-four-label">Daily Deal</div>
      <h3>Daily Deal Countdown Timer</h3>
      <p>Use this timer for daily ecommerce offers, marketplace deals, limited product discounts, and product cards that refresh every day.</p>

      <div class="vb-countdown-four-price">
        <div>
          <small>Today only</small>
          <strong>€49</strong>
        </div>
        <span>Save 35%</span>
      </div>

      <div class="vb-countdown-four-stock">
        <strong>Stock left</strong>
        <span><i></i></span>
        <em>18 items</em>
      </div>
    </div>

    <div class="vb-countdown-four-timer" aria-label="Daily deal countdown timer">
      <div>
        <strong data-hours>00</strong>
        <span>Hours</span>
      </div>

      <div>
        <strong data-minutes>00</strong>
        <span>Min</span>
      </div>

      <div>
        <strong data-seconds>00</strong>
        <span>Sec</span>
      </div>

      <p data-status>Deal resets at midnight.</p>
    </div>
  </div>
</div>

CSS

.vb-countdown-four-demo,
.vb-countdown-four-demo * {
  box-sizing: border-box;
}

.vb-countdown-four-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 38px);
  border-radius: 12px;
  background:
    repeating-linear-gradient(45deg, rgba(15, 23, 42, 0.035) 0 10px, transparent 10px 20px),
    linear-gradient(135deg, #f8fafc 0%, #ecfdf5 52%, #ffffff 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.22);
  box-shadow: 0 28px 80px rgba(5, 150, 105, 0.10);
}

.vb-countdown-four-card {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) minmax(150px, 190px);
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(14px, 2vw, 18px);
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.10);
}

.vb-countdown-four-image {
  position: relative;
  min-width: 0;
  min-height: clamp(280px, 35vw, 360px);
  overflow: hidden;
  border-radius: 26px 8px 26px 8px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,0.34), transparent 34%),
    linear-gradient(135deg, #064e3b, #10b981 58%, #a7f3d0) !important;
}

.vb-countdown-four-image span {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 3;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  color: #ecfdf5 !important;
  -webkit-text-fill-color: #ecfdf5 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-four-product-shape {
  position: absolute;
  left: 50%;
  top: 54%;
  width: clamp(140px, 18vw, 180px);
  height: clamp(170px, 23vw, 210px);
  border-radius: 30px 30px 12px 12px;
  transform: translate(-50%, -50%) rotate(-6deg);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.72), rgba(255,255,255,0.32)) !important;
  border: 1px solid rgba(255,255,255,0.32);
  box-shadow: 0 28px 70px rgba(6, 78, 59, 0.26);
}

.vb-countdown-four-product-shape::before {
  content: "";
  position: absolute;
  left: 24%;
  top: -20px;
  width: 54%;
  height: 42px;
  border-radius: 24px 24px 0 0;
  border: 12px solid rgba(255,255,255,0.42);
  border-bottom: 0;
}

.vb-countdown-four-product-shape i {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgba(6, 78, 59, 0.20);
}

.vb-countdown-four-product-shape i:nth-child(1) {
  left: 18%;
  top: 36%;
  width: 64%;
  height: 14px;
}

.vb-countdown-four-product-shape i:nth-child(2) {
  left: 18%;
  top: 52%;
  width: 46%;
  height: 14px;
}

.vb-countdown-four-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 14px 10px;
}

.vb-countdown-four-label {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 8px 18px 8px 18px;
  background: #d1fae5;
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-countdown-four-info h3 {
  margin: 0 0 14px !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: clamp(34px, 5vw, 62px) !important;
  line-height: 0.93 !important;
  font-weight: 950 !important;
  letter-spacing: -0.075em;
  overflow-wrap: anywhere;
}

.vb-countdown-four-info p {
  max-width: 590px;
  margin: 0 0 20px !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 15px;
  line-height: 1.72;
  font-weight: 650;
}

.vb-countdown-four-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 440px;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 22px;
  background: #f0fdf4;
  border: 1px solid rgba(16, 185, 129, 0.18);
}

.vb-countdown-four-price small {
  display: block;
  margin-bottom: 4px;
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vb-countdown-four-price strong {
  display: block;
  color: #064e3b !important;
  -webkit-text-fill-color: #064e3b !important;
  font-size: clamp(34px, 5vw, 42px);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.vb-countdown-four-price span {
  display: inline-flex;
  padding: 9px 12px;
  border-radius: 999px;
  background: #059669;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.vb-countdown-four-stock {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 70px;
  gap: 10px;
  align-items: center;
  max-width: 440px;
}

.vb-countdown-four-stock strong,
.vb-countdown-four-stock em {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.vb-countdown-four-stock span {
  overflow: hidden;
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
}

.vb-countdown-four-stock i {
  display: block;
  width: 66%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #10b981, #facc15) !important;
}

.vb-countdown-four-timer {
  display: grid;
  gap: 10px;
  align-content: stretch;
  min-width: 0;
  padding: 14px;
  border-radius: 26px;
  background: #0f172a;
}

.vb-countdown-four-timer div {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 15px 8px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 14%, rgba(255,255,255,0.16), transparent 34%),
    linear-gradient(135deg, rgba(16, 185, 129, 0.30), rgba(34, 197, 94, 0.10)) !important;
  border: 1px solid rgba(255,255,255,0.10);
}

.vb-countdown-four-timer strong {
  display: block;
  max-width: 100%;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-four-timer span {
  display: block;
  margin-top: 4px;
  color: #bbf7d0 !important;
  -webkit-text-fill-color: #bbf7d0 !important;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vb-countdown-four-timer p {
  margin: 4px 0 0 !important;
  color: #d1fae5 !important;
  -webkit-text-fill-color: #d1fae5 !important;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 1060px) {
  .vb-countdown-four-card {
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  }

  .vb-countdown-four-timer {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vb-countdown-four-timer p {
    grid-column: 1 / -1;
  }

  .vb-countdown-four-timer strong {
    font-size: clamp(32px, 7vw, 48px);
  }
}

@media (max-width: 740px) {
  .vb-countdown-four-card {
    grid-template-columns: 1fr;
    border-radius: 26px;
  }

  .vb-countdown-four-info h3 {
    font-size: 36px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-four-price {
    align-items: flex-start;
    flex-direction: column;
  }

  .vb-countdown-four-stock {
    grid-template-columns: 1fr;
  }

  .vb-countdown-four-timer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vb-countdown-four-timer strong {
    font-size: clamp(28px, 12vw, 42px);
  }
}

@media (max-width: 420px) {
  .vb-countdown-four-timer {
    grid-template-columns: 1fr;
  }
}

This daily deal countdown timer is useful for ecommerce product cards, daily offer sections, marketplace deals, product grids, homepage promotions, flash deal blocks, and limited-time product campaigns.

5. Checkout Reservation Countdown Timer

A checkout reservation countdown timer is useful for ecommerce checkout pages, booking flows, ticket reservations, cart holds, limited inventory purchases, appointment systems, and payment pages where users need to complete an action before a temporary reservation ends.

This example uses a checkout-focused design with a reserved cart message, payment-style summary card, shrinking progress bar, and compact minutes-and-seconds timer. The JavaScript restarts the reservation cycle when it reaches zero, so the demo keeps working in the future.

Checkout reservation countdown timer
Minutes and seconds countdown
Progress bar that decreases over time
Checkout summary card layout
Responsive reservation UI section

Example 05

Checkout Reservation Countdown Timer

Use this countdown timer to show how long a cart, ticket, booking, appointment, or checkout session is reserved.

Your checkout reservation is active. Complete checkout before the timer reaches zero.

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-five]");
  if (!timer) return;

  const duration = Number(timer.getAttribute("data-duration")) || 900;
  let remaining = duration;

  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const statusEl = timer.querySelector("[data-status]");
  const progressEl = timer.querySelector("[data-progress]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function updateTimer() {
    if (remaining <= 0) {
      remaining = duration;
    }

    const minutes = Math.floor(remaining / 60);
    const seconds = remaining % 60;
    const progress = (remaining / duration) * 100;

    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    progressEl.style.width = progress + "%";
    statusEl.textContent = "Your checkout reservation is active. Complete checkout before the timer reaches zero.";

    remaining -= 1;
  }

  updateTimer();
  setInterval(updateTimer, 1000);
})();

HTML

<div class="vb-countdown-five-demo">
  <div class="vb-countdown-five-checkout" data-vb-countdown-five data-duration="900">
    <div class="vb-countdown-five-copy">
      <span class="vb-countdown-five-kicker">Example 05</span>
      <h3>Checkout Reservation Countdown Timer</h3>
      <p>Use this countdown timer to show how long a cart, ticket, booking, appointment, or checkout session is reserved.</p>

      <div class="vb-countdown-five-progress">
        <span data-progress></span>
      </div>

      <p class="vb-countdown-five-status" data-status>Your checkout reservation is active. Complete checkout before the timer reaches zero.</p>
    </div>

    <aside class="vb-countdown-five-card">
      <div class="vb-countdown-five-card-top">
        <strong>Reserved checkout</strong>
        <span>Secure session</span>
      </div>

      <div class="vb-countdown-five-timer" aria-label="Checkout reservation countdown timer">
        <div>
          <strong data-minutes>00</strong>
          <span>Minutes</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Seconds</span>
        </div>
      </div>

      <div class="vb-countdown-five-summary">
        <div>
          <span>Subtotal</span>
          <strong>€129</strong>
        </div>
        <div>
          <span>Discount</span>
          <strong>-€30</strong>
        </div>
        <div>
          <span>Total</span>
          <strong>€99</strong>
        </div>
      </div>

      <button type="button">Continue Checkout</button>
    </aside>
  </div>
</div>

CSS

.vb-countdown-five-demo,
.vb-countdown-five-demo * {
  box-sizing: border-box;
}

.vb-countdown-five-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 38px);
  border-radius: 34px 10px 34px 10px;
  background:
    radial-gradient(circle at 12% 18%, rgba(59, 130, 246, 0.18), transparent 34%),
    radial-gradient(circle at 86% 22%, rgba(34, 197, 94, 0.16), transparent 34%),
    linear-gradient(135deg, #eff6ff 0%, #f0fdf4 52%, #ffffff 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.22);
  box-shadow: 0 28px 80px rgba(30, 64, 175, 0.10);
}

.vb-countdown-five-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 380px);
  gap: clamp(20px, 3vw, 28px);
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
}

.vb-countdown-five-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(24px, 4vw, 36px);
  border-radius: 28px 8px 28px 8px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #1d4ed8 55%, #047857 100%) !important;
  box-shadow: 0 26px 76px rgba(15, 23, 42, 0.22);
}

.vb-countdown-five-kicker {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.18);
  color: #bfdbfe !important;
  -webkit-text-fill-color: #bfdbfe !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-countdown-five-copy h3 {
  max-width: 760px;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(34px, 5.4vw, 70px) !important;
  line-height: 0.92 !important;
  font-weight: 950 !important;
  letter-spacing: -0.075em;
  overflow-wrap: anywhere;
}

.vb-countdown-five-copy p {
  max-width: 680px;
  margin: 0 0 24px !important;
  color: #dbeafe !important;
  -webkit-text-fill-color: #dbeafe !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-five-progress {
  overflow: hidden;
  width: 100%;
  max-width: 620px;
  height: 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.16);
}

.vb-countdown-five-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #facc15, #f97316) !important;
  transition: width 0.4s linear;
}

.vb-countdown-five-status {
  margin-bottom: 0 !important;
  color: #dcfce7 !important;
  -webkit-text-fill-color: #dcfce7 !important;
}

.vb-countdown-five-card {
  min-width: 0;
  padding: clamp(18px, 3vw, 24px);
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}

.vb-countdown-five-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.vb-countdown-five-card-top strong {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.vb-countdown-five-card-top span {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.vb-countdown-five-timer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.vb-countdown-five-timer div {
  min-width: 0;
  padding: 18px 10px;
  border-radius: 22px;
  background: #eff6ff;
  border: 1px solid rgba(59, 130, 246, 0.18);
  text-align: center;
}

.vb-countdown-five-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 7px;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-five-timer span {
  display: block;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-five-summary {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  padding: 16px;
  border-radius: 22px;
  background: #f8fafc;
}

.vb-countdown-five-summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.vb-countdown-five-summary span {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 14px;
  font-weight: 800;
}

.vb-countdown-five-summary strong {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 14px;
  font-weight: 950;
}

.vb-countdown-five-card button {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #10b981);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
}

@media (max-width: 900px) {
  .vb-countdown-five-checkout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .vb-countdown-five-copy {
    border-radius: 22px 8px 22px 8px;
  }

  .vb-countdown-five-copy h3 {
    font-size: 36px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-five-card {
    border-radius: 24px;
  }

  .vb-countdown-five-card-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .vb-countdown-five-timer strong {
    font-size: clamp(34px, 15vw, 52px);
  }
}

@media (max-width: 380px) {
  .vb-countdown-five-timer {
    grid-template-columns: 1fr;
  }
}

This checkout reservation countdown timer is useful for ecommerce checkouts, ticket reservations, cart holds, booking systems, payment pages, appointment flows, and limited inventory purchase pages.

6. Circular Progress Countdown Timer

A circular progress countdown timer is useful for dashboards, app interfaces, fitness sessions, study timers, productivity tools, course lessons, onboarding steps, and modern landing pages that need a visual time progress indicator.

This example uses a circular SVG progress ring, central countdown display, supporting status cards, and a dark app-style interface. The JavaScript restarts the circular timer when it reaches zero, so the demo keeps running instead of stopping.

Circular SVG progress countdown
Minutes and seconds display
Progress ring animation
Dashboard and app-style layout
Responsive circular timer component

Example 06

Circular Progress Countdown Timer

Use a circular JavaScript countdown timer for sessions, dashboards, lessons, workouts, productivity blocks, and progress-based UI components.

10 min Session length

Live Timer status

Loop Demo cycle

10:00 Session in progress

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-six]");
  if (!timer) return;

  const duration = Number(timer.getAttribute("data-duration")) || 600;
  let remaining = duration;

  const timeEl = timer.querySelector("[data-time]");
  const statusEl = timer.querySelector("[data-status]");
  const progressCircle = timer.querySelector("[data-circle-progress]");

  const radius = 92;
  const circumference = 2 * Math.PI * radius;

  progressCircle.style.strokeDasharray = circumference;
  progressCircle.style.strokeDashoffset = 0;

  function formatTime(totalSeconds) {
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;

    return String(minutes).padStart(2, "0") + ":" + String(seconds).padStart(2, "0");
  }

  function updateTimer() {
    if (remaining <= 0) {
      remaining = duration;
    }

    const progress = remaining / duration;
    const offset = circumference * (1 - progress);

    timeEl.textContent = formatTime(remaining);
    progressCircle.style.strokeDashoffset = offset;
    statusEl.textContent = "Session in progress";

    remaining -= 1;
  }

  updateTimer();
  setInterval(updateTimer, 1000);
})();

HTML

<div class="vb-countdown-six-demo">
  <div class="vb-countdown-six-app" data-vb-countdown-six data-duration="600">
    <div class="vb-countdown-six-content">
      <span class="vb-countdown-six-kicker">Example 06</span>
      <h3>Circular Progress Countdown Timer</h3>
      <p>Use a circular JavaScript countdown timer for sessions, dashboards, lessons, workouts, productivity blocks, and progress-based UI components.</p>

      <div class="vb-countdown-six-cards">
        <div>
          <strong>10 min</strong>
          <span>Session length</span>
        </div>
        <div>
          <strong>Live</strong>
          <span>Timer status</span>
        </div>
        <div>
          <strong>Loop</strong>
          <span>Demo cycle</span>
        </div>
      </div>
    </div>

    <div class="vb-countdown-six-circle-wrap">
      <svg class="vb-countdown-six-svg" viewBox="0 0 220 220" aria-hidden="true">
        <defs>
          <linearGradient id="vbCountdownSixGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#22d3ee"></stop>
            <stop offset="55%" stop-color="#8b5cf6"></stop>
            <stop offset="100%" stop-color="#ec4899"></stop>
          </linearGradient>
        </defs>
        <circle class="vb-countdown-six-track" cx="110" cy="110" r="92"></circle>
        <circle class="vb-countdown-six-progress" cx="110" cy="110" r="92" data-circle-progress></circle>
      </svg>

      <div class="vb-countdown-six-center">
        <strong data-time>10:00</strong>
        <span data-status>Session in progress</span>
      </div>
    </div>
  </div>
</div>

CSS

.vb-countdown-six-demo,
.vb-countdown-six-demo * {
  box-sizing: border-box;
}

.vb-countdown-six-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 38px);
  border-radius: clamp(34px, 5vw, 60px);
  background:
    radial-gradient(circle at 16% 18%, rgba(168, 85, 247, 0.16), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(14, 165, 233, 0.18), transparent 34%),
    linear-gradient(135deg, #f5f3ff 0%, #e0f2fe 52%, #ffffff 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.22);
  box-shadow: 0 28px 80px rgba(88, 28, 135, 0.11);
}

.vb-countdown-six-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
  gap: clamp(24px, 4vw, 36px);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 36px);
  border-radius: clamp(30px, 4vw, 46px);
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.12), transparent 34%),
    linear-gradient(135deg, #111827 0%, #4c1d95 54%, #0f172a 100%) !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.26);
}

.vb-countdown-six-content {
  min-width: 0;
}

.vb-countdown-six-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 10px 22px 10px 22px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: #ddd6fe !important;
  -webkit-text-fill-color: #ddd6fe !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-six-content h3 {
  max-width: 740px;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(34px, 5.6vw, 72px) !important;
  line-height: 0.92 !important;
  font-weight: 950 !important;
  letter-spacing: -0.075em;
  overflow-wrap: anywhere;
}

.vb-countdown-six-content p {
  max-width: 680px;
  margin: 0 0 24px !important;
  color: #e0e7ff !important;
  -webkit-text-fill-color: #e0e7ff !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-six-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 640px;
}

.vb-countdown-six-cards div {
  min-width: 0;
  padding: 18px;
  border-radius: 22px 22px 8px 22px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.13);
}

.vb-countdown-six-cards strong {
  display: block;
  margin-bottom: 6px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.vb-countdown-six-cards span {
  display: block;
  color: #c4b5fd !important;
  -webkit-text-fill-color: #c4b5fd !important;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 850;
}

.vb-countdown-six-circle-wrap {
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)) !important;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.vb-countdown-six-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.vb-countdown-six-track,
.vb-countdown-six-progress {
  fill: none;
  stroke-width: 14;
}

.vb-countdown-six-track {
  stroke: rgba(255,255,255,0.12);
}

.vb-countdown-six-progress {
  stroke: url("#vbCountdownSixGradient");
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s linear;
}

.vb-countdown-six-center {
  position: absolute;
  inset: 18%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.16), transparent 34%),
    linear-gradient(135deg, #1e1b4b, #312e81) !important;
  border: 1px solid rgba(255,255,255,0.12);
  text-align: center;
}

.vb-countdown-six-center strong {
  display: block;
  max-width: 100%;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(38px, 9vw, 74px);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-six-center span {
  display: block;
  padding: 0 14px;
  color: #bae6fd !important;
  -webkit-text-fill-color: #bae6fd !important;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 850;
}

@media (max-width: 900px) {
  .vb-countdown-six-app {
    grid-template-columns: 1fr;
  }

  .vb-countdown-six-circle-wrap {
    width: min(100%, 340px);
  }
}

@media (max-width: 640px) {
  .vb-countdown-six-content h3 {
    font-size: 36px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-six-cards {
    grid-template-columns: 1fr;
  }

  .vb-countdown-six-circle-wrap {
    width: min(100%, 300px);
  }

  .vb-countdown-six-center strong {
    font-size: clamp(38px, 17vw, 62px);
  }
}

This circular progress countdown timer is useful for dashboard widgets, app interfaces, productivity sessions, study timers, fitness timers, onboarding flows, course lessons, and progress-based landing page sections.

7. Coming Soon Page Countdown Timer

A coming soon page countdown timer is useful for new websites, product previews, app launches, landing pages, brand campaigns, waitlist pages, and pre-launch marketing pages. It gives visitors a clear launch message while collecting attention before the website or product goes live.

This example uses a cinematic coming soon layout with a split dark gradient background, large launch text, glass countdown cards, waitlist form, and decorative light beams. The JavaScript calculates a future launch cycle dynamically, so the demo keeps working instead of stopping on an old date.

Coming soon page countdown timer
Landing page launch design
Days, hours, minutes, and seconds
Email waitlist form
Fully responsive countdown layout

Example 07

Coming Soon Page Countdown Timer

Use a polished countdown section for website launches, new product previews, app waitlists, brand campaigns, and coming soon landing pages.

Launch date loading

Launch Countdown Coming soon

00 Days

00 Hours

00 Minutes

00 Seconds

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-seven]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 21;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-07T09:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextLaunchEl = timer.querySelector("[data-next-launch]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextLaunch(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateCountdown() {
    const now = Date.now();
    const nextLaunch = getNextLaunch(now);
    let remaining = nextLaunch - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const dateText = new Date(nextLaunch).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    nextLaunchEl.textContent = "Next launch window: " + dateText;
    statusEl.textContent = "Coming soon";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-seven-demo">
  <section class="vb-countdown-seven-coming" data-vb-countdown-seven data-cycle-days="21">
    <div class="vb-countdown-seven-copy">
      <span class="vb-countdown-seven-kicker">Example 07</span>
      <h3>Coming Soon Page Countdown Timer</h3>
      <p>Use a polished countdown section for website launches, new product previews, app waitlists, brand campaigns, and coming soon landing pages.</p>

      <form class="vb-countdown-seven-form">
        <input type="email" placeholder="Join the waitlist" aria-label="Email address">
        <button type="button">Notify Me</button>
      </form>

      <p class="vb-countdown-seven-note" data-next-launch>Launch date loading</p>
    </div>

    <div class="vb-countdown-seven-panel">
      <div class="vb-countdown-seven-panel-top">
        <span>Launch Countdown</span>
        <strong data-status>Coming soon</strong>
      </div>

      <div class="vb-countdown-seven-timer" aria-label="Coming soon countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Minutes</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Seconds</span>
        </div>
      </div>
    </div>
  </section>
</div>

CSS

.vb-countdown-seven-demo,
.vb-countdown-seven-demo * {
  box-sizing: border-box;
}

.vb-countdown-seven-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 42px);
  border-radius: 18px 58px 58px 18px;
  background:
    radial-gradient(circle at 12% 18%, rgba(59, 130, 246, 0.22), transparent 32%),
    radial-gradient(circle at 88% 22%, rgba(217, 70, 239, 0.18), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 54%, #020617 100%) !important;
  border: 1px solid rgba(147, 197, 253, 0.18);
  box-shadow: 0 34px 96px rgba(2, 6, 23, 0.38);
}

.vb-countdown-seven-coming {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
  max-width: 1160px;
  min-height: 520px;
  margin: 0 auto;
  overflow: hidden;
}

.vb-countdown-seven-coming::before {
  content: "";
  position: absolute;
  left: 46%;
  top: -20%;
  width: 2px;
  height: 150%;
  background: linear-gradient(to bottom, transparent, rgba(125, 211, 252, 0.54), transparent);
  transform: rotate(18deg);
  box-shadow: 0 0 48px rgba(125, 211, 252, 0.42);
}

.vb-countdown-seven-coming::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 8%;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: rgba(217, 70, 239, 0.14);
  filter: blur(2px);
}

.vb-countdown-seven-copy,
.vb-countdown-seven-panel {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.vb-countdown-seven-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 4px 18px 18px 4px;
  background: rgba(59, 130, 246, 0.16);
  border: 1px solid rgba(147, 197, 253, 0.20);
  color: #bfdbfe !important;
  -webkit-text-fill-color: #bfdbfe !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vb-countdown-seven-copy h3 {
  max-width: 780px;
  margin: 0 0 18px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(36px, 6vw, 82px) !important;
  line-height: 0.88 !important;
  font-weight: 950 !important;
  letter-spacing: -0.08em;
  overflow-wrap: anywhere;
}

.vb-countdown-seven-copy p {
  max-width: 650px;
  margin: 0 0 24px !important;
  color: #dbeafe !important;
  -webkit-text-fill-color: #dbeafe !important;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-seven-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 10px;
  max-width: 560px;
  margin-bottom: 14px;
}

.vb-countdown-seven-form input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 14px 999px 999px 14px;
  border: 1px solid rgba(191, 219, 254, 0.18);
  outline: none;
  background: rgba(255,255,255,0.08);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px;
  font-weight: 750;
}

.vb-countdown-seven-form input::placeholder {
  color: rgba(219, 234, 254, 0.72);
  -webkit-text-fill-color: rgba(219, 234, 254, 0.72);
}

.vb-countdown-seven-form button {
  min-height: 52px;
  border: 0;
  border-radius: 999px 14px 14px 999px;
  background: linear-gradient(135deg, #3b82f6, #d946ef);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(59, 130, 246, 0.26);
}

.vb-countdown-seven-note {
  margin: 0 !important;
  color: #c4b5fd !important;
  -webkit-text-fill-color: #c4b5fd !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.vb-countdown-seven-panel {
  padding: clamp(18px, 3vw, 26px);
  border-radius: 36px 12px 36px 12px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,0.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045)) !important;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 26px 76px rgba(2, 6, 23, 0.28);
  backdrop-filter: blur(14px);
}

.vb-countdown-seven-panel-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.vb-countdown-seven-panel-top span {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #dbeafe !important;
  -webkit-text-fill-color: #dbeafe !important;
  font-size: 12px;
  font-weight: 950;
}

.vb-countdown-seven-panel-top strong {
  color: #f0abfc !important;
  -webkit-text-fill-color: #f0abfc !important;
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

.vb-countdown-seven-timer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vb-countdown-seven-timer div {
  min-width: 0;
  padding: clamp(16px, 3vw, 24px) 10px;
  border-radius: 22px 8px 22px 8px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255,255,255,0.11);
  text-align: center;
}

.vb-countdown-seven-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 8px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(32px, 7vw, 58px);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-seven-timer span {
  display: block;
  color: #bfdbfe !important;
  -webkit-text-fill-color: #bfdbfe !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .vb-countdown-seven-coming {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .vb-countdown-seven-demo {
    border-radius: 16px 34px 34px 16px;
  }

  .vb-countdown-seven-copy h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-seven-form {
    grid-template-columns: 1fr;
  }

  .vb-countdown-seven-form input,
  .vb-countdown-seven-form button {
    border-radius: 999px;
  }

  .vb-countdown-seven-panel-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .vb-countdown-seven-panel-top strong {
    text-align: left;
  }
}

@media (max-width: 380px) {
  .vb-countdown-seven-timer {
    grid-template-columns: 1fr;
  }
}

This coming soon page countdown timer is useful for website launches, waitlist landing pages, app previews, product teasers, brand campaigns, SaaS launch pages, and pre-release marketing sections.

8. Webinar Registration Countdown Timer

A webinar registration countdown timer is useful for online workshops, training events, live classes, product demos, virtual summits, coaching sessions, and educational landing pages. It helps visitors see how much time remains before the next registration window closes.

This example uses a clean webinar registration card with a speaker section, schedule details, seat counter, countdown sidebar, and registration button. The JavaScript uses a repeating weekly webinar schedule, so the timer keeps working over time.

Webinar registration countdown timer
Weekly webinar schedule logic
Speaker and seat details
Registration-focused CTA
Responsive landing page card design

Live Training Webinar Registration Countdown Timer

Webinar Registration Countdown Timer

Use this countdown timer for webinar landing pages, live product demos, workshops, online lessons, training sessions, and virtual event registration pages.

Format Live Online

Seats 42 left

Access Free

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-eight]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 7;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-06T17:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextWebinarEl = timer.querySelector("[data-next-webinar]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextWebinar(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateCountdown() {
    const now = Date.now();
    const nextWebinar = getNextWebinar(now);
    let remaining = nextWebinar - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const dateText = new Date(nextWebinar).toLocaleDateString("en-US", {
      weekday: "short",
      month: "short",
      day: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    nextWebinarEl.textContent = "Next webinar: " + dateText;
    statusEl.textContent = "Registration is open for the next webinar.";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-eight-demo">
  <section class="vb-countdown-eight-webinar" data-vb-countdown-eight data-cycle-days="7">
    <div class="vb-countdown-eight-main">
      <div class="vb-countdown-eight-speaker">
        <div class="vb-countdown-eight-avatar">W</div>
        <div>
          <span>Live Training</span>
          <strong>Webinar Registration Countdown Timer</strong>
        </div>
      </div>

      <h3>Webinar Registration Countdown Timer</h3>
      <p>Use this countdown timer for webinar landing pages, live product demos, workshops, online lessons, training sessions, and virtual event registration pages.</p>

      <div class="vb-countdown-eight-details">
        <div>
          <span>Format</span>
          <strong>Live Online</strong>
        </div>
        <div>
          <span>Seats</span>
          <strong>42 left</strong>
        </div>
        <div>
          <span>Access</span>
          <strong>Free</strong>
        </div>
      </div>
    </div>

    <aside class="vb-countdown-eight-countbox">
      <span class="vb-countdown-eight-kicker">Example 08</span>
      <strong class="vb-countdown-eight-date" data-next-webinar>Next webinar loading</strong>

      <div class="vb-countdown-eight-timer" aria-label="Webinar registration countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <p data-status>Registration is open for the next webinar.</p>
      <a href="#webinar-registration">Register Now</a>
    </aside>
  </section>
</div>

CSS

.vb-countdown-eight-demo,
.vb-countdown-eight-demo * {
  box-sizing: border-box;
}

.vb-countdown-eight-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 38px);
  border-radius: 46px 46px 46px 10px;
  background:
    radial-gradient(circle at 14% 18%, rgba(14, 165, 233, 0.18), transparent 34%),
    radial-gradient(circle at 88% 24%, rgba(99, 102, 241, 0.16), transparent 34%),
    linear-gradient(135deg, #f8fafc 0%, #eef2ff 52%, #ffffff 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.20);
  box-shadow: 0 28px 80px rgba(49, 46, 129, 0.10);
}

.vb-countdown-eight-webinar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 360px);
  gap: clamp(20px, 3vw, 28px);
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
}

.vb-countdown-eight-main {
  min-width: 0;
  padding: clamp(24px, 4vw, 38px);
  border-radius: 34px 34px 34px 8px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
}

.vb-countdown-eight-speaker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.vb-countdown-eight-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px 18px 18px 4px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 24px;
  font-weight: 950;
  box-shadow: 0 14px 32px rgba(99, 102, 241, 0.22);
}

.vb-countdown-eight-speaker span {
  display: block;
  margin-bottom: 4px;
  color: #4f46e5 !important;
  -webkit-text-fill-color: #4f46e5 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-countdown-eight-speaker strong {
  display: block;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
}

.vb-countdown-eight-main h3 {
  margin: 0 0 16px !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: clamp(34px, 5.4vw, 68px) !important;
  line-height: 0.92 !important;
  font-weight: 950 !important;
  letter-spacing: -0.075em;
  overflow-wrap: anywhere;
}

.vb-countdown-eight-main p {
  max-width: 690px;
  margin: 0 0 24px !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-eight-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.vb-countdown-eight-details div {
  min-width: 0;
  padding: 16px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.vb-countdown-eight-details span {
  display: block;
  margin-bottom: 6px;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 12px;
  font-weight: 850;
}

.vb-countdown-eight-details strong {
  display: block;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: clamp(18px, 3vw, 24px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.vb-countdown-eight-countbox {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 16px;
  padding: clamp(20px, 3vw, 26px);
  border-radius: 34px 8px 34px 34px;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.14), transparent 34%),
    linear-gradient(135deg, #0f172a, #312e81 58%, #1e1b4b) !important;
  box-shadow: 0 24px 70px rgba(49, 46, 129, 0.20);
}

.vb-countdown-eight-kicker {
  display: inline-flex;
  justify-self: start;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: #c7d2fe !important;
  -webkit-text-fill-color: #c7d2fe !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-countdown-eight-date {
  display: block;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.vb-countdown-eight-timer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vb-countdown-eight-timer div {
  min-width: 0;
  padding: 16px 8px;
  border-radius: 18px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.12);
  text-align: center;
}

.vb-countdown-eight-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 6px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(30px, 6vw, 48px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-eight-timer span {
  display: block;
  color: #bae6fd !important;
  -webkit-text-fill-color: #bae6fd !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-eight-countbox p {
  margin: 0 !important;
  color: #dbeafe !important;
  -webkit-text-fill-color: #dbeafe !important;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 650;
}

.vb-countdown-eight-countbox a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(14, 165, 233, 0.24);
}

@media (max-width: 900px) {
  .vb-countdown-eight-webinar {
    grid-template-columns: 1fr;
  }

  .vb-countdown-eight-timer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .vb-countdown-eight-timer strong {
    font-size: clamp(26px, 6vw, 42px);
  }
}

@media (max-width: 640px) {
  .vb-countdown-eight-demo {
    border-radius: 32px 32px 32px 8px;
  }

  .vb-countdown-eight-main h3 {
    font-size: 36px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-eight-details {
    grid-template-columns: 1fr;
  }

  .vb-countdown-eight-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-eight-countbox a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-eight-timer {
    grid-template-columns: 1fr;
  }
}

This webinar registration countdown timer is useful for webinar landing pages, live product demos, online workshops, training pages, course launches, virtual event registration pages, and coaching session campaigns.

9. Black Friday Sale Countdown Timer

A Black Friday sale countdown timer is useful for seasonal ecommerce campaigns, Black Friday landing pages, Cyber Monday promotions, holiday discounts, product sale sections, and limited-time offer banners. It helps highlight a major campaign deadline with strong visual urgency.

This example uses a dark retail campaign layout with neon sale styling, large discount text, angled promo cards, responsive countdown blocks, and a strong shopping CTA. The JavaScript calculates the next yearly Black Friday campaign window, so the demo keeps working year after year.

Black Friday sale countdown timer
Yearly seasonal campaign logic
Dark ecommerce promo layout
Large responsive timer cards
Retail discount CTA section

Example 09

Black Friday Sale Countdown Timer

Use a high-impact countdown timer for Black Friday sales, Cyber Monday promotions, seasonal ecommerce campaigns, and limited holiday offers.

70% OFF Seasonal ecommerce promotion

View Deals

Sale starts in Black Friday loading

00 Days

00 Hours

00 Min

00 Sec

Black Friday campaign countdown is active.

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-nine]");
  if (!timer) return;

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextSaleEl = timer.querySelector("[data-next-sale]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getBlackFriday(year) {
    const date = new Date(year, 10, 1, 0, 0, 0);
    let fridayCount = 0;

    while (date.getMonth() === 10) {
      if (date.getDay() === 5) {
        fridayCount += 1;
        if (fridayCount === 4) {
          date.setHours(0, 0, 0, 0);
          return date.getTime();
        }
      }

      date.setDate(date.getDate() + 1);
    }

    return new Date(year, 10, 29, 0, 0, 0).getTime();
  }

  function getNextBlackFriday(now) {
    const currentYear = new Date(now).getFullYear();
    const thisYear = getBlackFriday(currentYear);

    if (thisYear > now) {
      return thisYear;
    }

    return getBlackFriday(currentYear + 1);
  }

  function updateCountdown() {
    const now = Date.now();
    const nextSale = getNextBlackFriday(now);
    let remaining = nextSale - now;

    if (remaining <= 0) {
      remaining = getBlackFriday(new Date(now).getFullYear() + 1) - now;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const saleDate = new Date(nextSale).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    nextSaleEl.textContent = "Next Black Friday: " + saleDate;
    statusEl.textContent = "Black Friday campaign countdown is active.";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-nine-demo">
  <section class="vb-countdown-nine-sale" data-vb-countdown-nine>
    <div class="vb-countdown-nine-left">
      <span class="vb-countdown-nine-kicker">Example 09</span>
      <h3>Black Friday Sale Countdown Timer</h3>
      <p>Use a high-impact countdown timer for Black Friday sales, Cyber Monday promotions, seasonal ecommerce campaigns, and limited holiday offers.</p>

      <div class="vb-countdown-nine-discount">
        <strong>70% OFF</strong>
        <span>Seasonal ecommerce promotion</span>
      </div>

      <a href="#black-friday-sale" class="vb-countdown-nine-button">View Deals</a>
    </div>

    <div class="vb-countdown-nine-right">
      <div class="vb-countdown-nine-card">
        <div class="vb-countdown-nine-card-top">
          <span>Sale starts in</span>
          <strong data-next-sale>Black Friday loading</strong>
        </div>

        <div class="vb-countdown-nine-timer" aria-label="Black Friday sale countdown timer">
          <div>
            <strong data-days>00</strong>
            <span>Days</span>
          </div>

          <div>
            <strong data-hours>00</strong>
            <span>Hours</span>
          </div>

          <div>
            <strong data-minutes>00</strong>
            <span>Min</span>
          </div>

          <div>
            <strong data-seconds>00</strong>
            <span>Sec</span>
          </div>
        </div>

        <p data-status>Black Friday campaign countdown is active.</p>
      </div>
    </div>
  </section>
</div>

CSS

.vb-countdown-nine-demo,
.vb-countdown-nine-demo * {
  box-sizing: border-box;
}

.vb-countdown-nine-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 42px);
  border-radius: 10px 10px 54px 54px;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 18px),
    radial-gradient(circle at 18% 22%, rgba(239, 68, 68, 0.22), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(250, 204, 21, 0.16), transparent 34%),
    linear-gradient(135deg, #020617 0%, #111827 48%, #450a0a 100%) !important;
  border: 1px solid rgba(248, 113, 113, 0.22);
  box-shadow: 0 34px 96px rgba(2, 6, 23, 0.42);
}

.vb-countdown-nine-sale {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.75fr);
  gap: clamp(24px, 4vw, 42px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  overflow: hidden;
}

.vb-countdown-nine-sale::before {
  content: "";
  position: absolute;
  left: 46%;
  top: 4%;
  width: 140px;
  height: 92%;
  background: rgba(250, 204, 21, 0.10);
  transform: skewX(-16deg);
  filter: blur(1px);
}

.vb-countdown-nine-left,
.vb-countdown-nine-right {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.vb-countdown-nine-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 2px 16px 2px 16px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(248, 113, 113, 0.26);
  color: #fecaca !important;
  -webkit-text-fill-color: #fecaca !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vb-countdown-nine-left h3 {
  max-width: 820px;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(36px, 6.2vw, 86px) !important;
  line-height: 0.86 !important;
  font-weight: 950 !important;
  letter-spacing: -0.085em;
  overflow-wrap: anywhere;
}

.vb-countdown-nine-left p {
  max-width: 660px;
  margin: 0 0 22px !important;
  color: #fee2e2 !important;
  -webkit-text-fill-color: #fee2e2 !important;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-nine-discount {
  display: inline-grid;
  gap: 5px;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 4px 28px 4px 28px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.30), rgba(250, 204, 21, 0.14)) !important;
  border: 1px solid rgba(250, 204, 21, 0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

.vb-countdown-nine-discount strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: -0.07em;
}

.vb-countdown-nine-discount span {
  color: #fde68a !important;
  -webkit-text-fill-color: #fde68a !important;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 850;
}

.vb-countdown-nine-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 20px;
  border-radius: 4px 999px 999px 4px;
  background: linear-gradient(135deg, #ef4444, #f97316 55%, #facc15);
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 18px 40px rgba(239, 68, 68, 0.28);
}

.vb-countdown-nine-right {
  display: flex;
  justify-content: center;
}

.vb-countdown-nine-card {
  width: min(100%, 430px);
  padding: clamp(20px, 3vw, 28px);
  border-radius: 38px 8px 38px 8px;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,0.16), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045)) !important;
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px);
  box-shadow: 0 28px 80px rgba(0,0,0,0.24);
}

.vb-countdown-nine-card-top {
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
}

.vb-countdown-nine-card-top span {
  color: #fecaca !important;
  -webkit-text-fill-color: #fecaca !important;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vb-countdown-nine-card-top strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.vb-countdown-nine-timer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.vb-countdown-nine-timer div {
  min-width: 0;
  padding: 18px 10px;
  border-radius: 8px 22px 8px 22px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.16);
  text-align: center;
  box-shadow: 0 18px 42px rgba(0,0,0,0.18);
}

.vb-countdown-nine-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 6px;
  color: #991b1b !important;
  -webkit-text-fill-color: #991b1b !important;
  font-size: clamp(34px, 7vw, 56px);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-nine-timer span {
  display: block;
  color: #7f1d1d !important;
  -webkit-text-fill-color: #7f1d1d !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-nine-card p {
  margin: 0 !important;
  color: #fee2e2 !important;
  -webkit-text-fill-color: #fee2e2 !important;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
}

@media (max-width: 920px) {
  .vb-countdown-nine-sale {
    grid-template-columns: 1fr;
  }

  .vb-countdown-nine-right {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .vb-countdown-nine-demo {
    border-radius: 10px 10px 34px 34px;
  }

  .vb-countdown-nine-left h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-nine-button {
    width: 100%;
    border-radius: 999px;
  }
}

@media (max-width: 380px) {
  .vb-countdown-nine-timer {
    grid-template-columns: 1fr;
  }
}

This Black Friday sale countdown timer is useful for ecommerce campaign pages, holiday sale banners, Cyber Monday promotions, product discount sections, seasonal landing pages, and major retail offer pages.

10. Limited Stock Countdown Timer

A limited stock countdown timer is useful for ecommerce product pages, product cards, drops, flash inventory alerts, preorder campaigns, ticket sales, and limited quantity offers. It combines time urgency with stock availability so visitors can see both deadline and inventory status.

This example uses an inventory-focused layout with a stock meter, product availability badge, compact countdown display, and action button. The JavaScript uses a short repeating inventory window, so the demo never stays stuck after reaching zero.

Limited stock countdown timer
Inventory and stock meter layout
Short repeating timer window
Responsive product availability card
Useful for product pages and drops

Example 10

Limited Stock

Limited Stock Countdown Timer

Use this countdown timer for product pages, limited drops, inventory campaigns, product cards, ticket sales, and preorder availability sections.

Only 12 items left Low stock

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-ten]");
  if (!timer) return;

  const duration = Number(timer.getAttribute("data-duration")) || 3600;
  let remaining = duration;

  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function updateCountdown() {
    if (remaining <= 0) {
      remaining = duration;
    }

    const hours = Math.floor(remaining / (1000 * 60 * 60));
    const minutes = Math.floor((remaining / 60) % 60);
    const seconds = remaining % 60;

    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    statusEl.textContent = "Inventory hold is active.";

    remaining -= 1;
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-ten-demo">
  <section class="vb-countdown-ten-stock" data-vb-countdown-ten data-duration="3600">
    <div class="vb-countdown-ten-product">
      <div class="vb-countdown-ten-image">
        <span>Example 10</span>
        <div class="vb-countdown-ten-box">
          <i></i>
          <i></i>
          <i></i>
        </div>
      </div>

      <div class="vb-countdown-ten-info">
        <div class="vb-countdown-ten-label">Limited Stock</div>
        <h3>Limited Stock Countdown Timer</h3>
        <p>Use this countdown timer for product pages, limited drops, inventory campaigns, product cards, ticket sales, and preorder availability sections.</p>

        <div class="vb-countdown-ten-meter">
          <div class="vb-countdown-ten-meter-head">
            <strong>Only 12 items left</strong>
            <span>Low stock</span>
          </div>
          <div class="vb-countdown-ten-meter-bar">
            <i></i>
          </div>
        </div>
      </div>
    </div>

    <aside class="vb-countdown-ten-sidebar">
      <span class="vb-countdown-ten-kicker">Stock window</span>
      <strong class="vb-countdown-ten-title">Reserve before timer ends</strong>

      <div class="vb-countdown-ten-timer" aria-label="Limited stock countdown timer">
        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <p data-status>Inventory hold is active.</p>
      <a href="#reserve-stock">Reserve Stock</a>
    </aside>
  </section>
</div>

CSS

.vb-countdown-ten-demo,
.vb-countdown-ten-demo * {
  box-sizing: border-box;
}

.vb-countdown-ten-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 38px);
  border-radius: 8px 48px 8px 48px;
  background:
    radial-gradient(circle at 12% 18%, rgba(245, 158, 11, 0.18), transparent 34%),
    radial-gradient(circle at 86% 24%, rgba(20, 184, 166, 0.18), transparent 34%),
    linear-gradient(135deg, #fffbeb 0%, #f0fdfa 52%, #ffffff 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.24);
  box-shadow: 0 28px 80px rgba(120, 53, 15, 0.10);
}

.vb-countdown-ten-stock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  gap: clamp(18px, 3vw, 26px);
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
}

.vb-countdown-ten-product {
  display: grid;
  grid-template-columns: minmax(220px, 310px) minmax(0, 1fr);
  gap: 18px;
  min-width: 0;
  padding: clamp(14px, 2vw, 18px);
  border-radius: 30px 8px 30px 8px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
}

.vb-countdown-ten-image {
  position: relative;
  min-width: 0;
  min-height: clamp(260px, 32vw, 340px);
  overflow: hidden;
  border-radius: 24px 8px 24px 8px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,0.30), transparent 34%),
    linear-gradient(135deg, #92400e, #f59e0b 52%, #14b8a6) !important;
}

.vb-countdown-ten-image > span {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 3;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fffbeb !important;
  -webkit-text-fill-color: #fffbeb !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-ten-box {
  position: absolute;
  left: 50%;
  top: 55%;
  width: clamp(150px, 20vw, 200px);
  height: clamp(150px, 20vw, 200px);
  transform: translate(-50%, -50%) rotate(8deg);
  border-radius: 28px 10px 28px 10px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.70), rgba(255,255,255,0.30)) !important;
  border: 1px solid rgba(255,255,255,0.34);
  box-shadow: 0 28px 68px rgba(120, 53, 15, 0.24);
}

.vb-countdown-ten-box i {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.18);
}

.vb-countdown-ten-box i:nth-child(1) {
  left: 24px;
  top: 42px;
  width: 60%;
  height: 14px;
}

.vb-countdown-ten-box i:nth-child(2) {
  left: 24px;
  top: 78px;
  width: 46%;
  height: 14px;
}

.vb-countdown-ten-box i:nth-child(3) {
  left: 24px;
  bottom: 32px;
  width: 32%;
  height: 28px;
  border-radius: 10px;
  background: rgba(20, 184, 166, 0.30);
}

.vb-countdown-ten-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 12px 8px;
}

.vb-countdown-ten-label {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px 999px 999px 4px;
  background: #fef3c7;
  color: #92400e !important;
  -webkit-text-fill-color: #92400e !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-countdown-ten-info h3 {
  margin: 0 0 14px !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: clamp(34px, 5vw, 62px) !important;
  line-height: 0.93 !important;
  font-weight: 950 !important;
  letter-spacing: -0.075em;
  overflow-wrap: anywhere;
}

.vb-countdown-ten-info p {
  max-width: 590px;
  margin: 0 0 20px !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 15px;
  line-height: 1.72;
  font-weight: 650;
}

.vb-countdown-ten-meter {
  max-width: 480px;
  padding: 16px;
  border-radius: 22px;
  background: #fffbeb;
  border: 1px solid rgba(245, 158, 11, 0.22);
}

.vb-countdown-ten-meter-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.vb-countdown-ten-meter-head strong {
  color: #78350f !important;
  -webkit-text-fill-color: #78350f !important;
  font-size: 14px;
  font-weight: 950;
}

.vb-countdown-ten-meter-head span {
  color: #b45309 !important;
  -webkit-text-fill-color: #b45309 !important;
  font-size: 12px;
  font-weight: 850;
}

.vb-countdown-ten-meter-bar {
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: #fde68a;
}

.vb-countdown-ten-meter-bar i {
  display: block;
  width: 32%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ef4444, #f59e0b) !important;
}

.vb-countdown-ten-sidebar {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 16px;
  padding: clamp(20px, 3vw, 26px);
  border-radius: 8px 34px 8px 34px;
  background:
    radial-gradient(circle at 24% 16%, rgba(255,255,255,0.14), transparent 34%),
    linear-gradient(135deg, #0f172a, #134e4a 58%, #042f2e) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
}

.vb-countdown-ten-kicker {
  display: inline-flex;
  justify-self: start;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.14);
  border: 1px solid rgba(94, 234, 212, 0.20);
  color: #99f6e4 !important;
  -webkit-text-fill-color: #99f6e4 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-countdown-ten-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 26px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.vb-countdown-ten-timer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.vb-countdown-ten-timer div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px 6px 18px 6px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.12);
}

.vb-countdown-ten-timer strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(30px, 6vw, 44px);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-ten-timer span {
  color: #ccfbf1 !important;
  -webkit-text-fill-color: #ccfbf1 !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-ten-sidebar p {
  margin: 0 !important;
  color: #ccfbf1 !important;
  -webkit-text-fill-color: #ccfbf1 !important;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 650;
}

.vb-countdown-ten-sidebar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #14b8a6);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(20, 184, 166, 0.24);
}

@media (max-width: 980px) {
  .vb-countdown-ten-stock {
    grid-template-columns: 1fr;
  }

  .vb-countdown-ten-timer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vb-countdown-ten-timer div {
    display: grid;
    place-items: center;
    text-align: center;
  }
}

@media (max-width: 760px) {
  .vb-countdown-ten-product {
    grid-template-columns: 1fr;
  }

  .vb-countdown-ten-info h3 {
    font-size: 36px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-ten-meter-head {
    flex-direction: column;
  }

  .vb-countdown-ten-sidebar a {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .vb-countdown-ten-timer {
    grid-template-columns: 1fr;
  }
}

This limited stock countdown timer is useful for ecommerce product pages, product cards, limited inventory campaigns, preorder drops, ticket availability sections, and flash stock alerts.

11. Sticky Top Bar Countdown Timer

A sticky top bar countdown timer is useful for ecommerce stores, SaaS websites, course launches, limited offers, announcement bars, free shipping campaigns, and site-wide promotions. It keeps the deadline visible without taking over the full page.

This example uses a slim sticky-style announcement bar with a compact countdown, promo message, pill CTA button, and responsive stacking for smaller screens. The JavaScript uses a repeating 6-hour campaign window, so the demo keeps running and never stays stopped.

Sticky top bar countdown timer
Compact announcement bar layout
Hours, minutes, and seconds
Repeating campaign window
Responsive mobile-friendly top bar

Example 11 Limited offer ends soon

Use this sticky top bar countdown for site-wide sale messages, free shipping offers, and promotional campaigns.

00 Hours

00 Min

00 Sec

Claim Offer

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-eleven]");
  if (!timer) return;

  const duration = Number(timer.getAttribute("data-duration")) || 21600;
  let remaining = duration;

  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function updateCountdown() {
    if (remaining <= 0) {
      remaining = duration;
    }

    const hours = Math.floor(remaining / 3600);
    const minutes = Math.floor((remaining / 60) % 60);
    const seconds = remaining % 60;

    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);

    remaining -= 1;
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-eleven-demo">
  <div class="vb-countdown-eleven-bar" data-vb-countdown-eleven data-duration="21600">
    <div class="vb-countdown-eleven-message">
      <span class="vb-countdown-eleven-kicker">Example 11</span>
      <strong>Limited offer ends soon</strong>
      <p>Use this sticky top bar countdown for site-wide sale messages, free shipping offers, and promotional campaigns.</p>
    </div>

    <div class="vb-countdown-eleven-timer" aria-label="Sticky top bar countdown timer">
      <div>
        <strong data-hours>00</strong>
        <span>Hours</span>
      </div>

      <div>
        <strong data-minutes>00</strong>
        <span>Min</span>
      </div>

      <div>
        <strong data-seconds>00</strong>
        <span>Sec</span>
      </div>
    </div>

    <a href="#top-bar-offer" class="vb-countdown-eleven-button">Claim Offer</a>
  </div>
</div>

CSS

.vb-countdown-eleven-demo,
.vb-countdown-eleven-demo * {
  box-sizing: border-box;
}

.vb-countdown-eleven-demo {
  margin: 28px 0;
  padding: clamp(16px, 3vw, 30px);
  border-radius: 32px 32px 8px 8px;
  background:
    linear-gradient(135deg, #f8fafc 0%, #fff7ed 50%, #ffffff 100%) !important;
  border: 1px solid rgba(249, 115, 22, 0.20);
  box-shadow: 0 24px 70px rgba(124, 45, 18, 0.09);
}

.vb-countdown-eleven-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: clamp(14px, 2.5vw, 22px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(14px, 2vw, 18px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 50%, rgba(251, 146, 60, 0.28), transparent 34%),
    linear-gradient(135deg, #111827 0%, #7c2d12 48%, #ea580c 100%) !important;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
}

.vb-countdown-eleven-message {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.vb-countdown-eleven-kicker {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fed7aa !important;
  -webkit-text-fill-color: #fed7aa !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vb-countdown-eleven-message strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.vb-countdown-eleven-message p {
  min-width: 0;
  margin: 0 !important;
  color: #ffedd5 !important;
  -webkit-text-fill-color: #ffedd5 !important;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.vb-countdown-eleven-timer {
  display: grid;
  grid-template-columns: repeat(3, minmax(54px, 1fr));
  gap: 8px;
  min-width: 0;
}

.vb-countdown-eleven-timer div {
  min-width: 0;
  padding: 9px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  text-align: center;
}

.vb-countdown-eleven-timer strong {
  display: block;
  margin-bottom: 2px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(18px, 2.6vw, 26px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.vb-countdown-eleven-timer span {
  display: block;
  color: #fde68a !important;
  -webkit-text-fill-color: #fde68a !important;
  font-size: 9px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-eleven-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 17px;
  border-radius: 999px;
  background: #ffffff;
  color: #9a3412 !important;
  -webkit-text-fill-color: #9a3412 !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
}

@media (max-width: 980px) {
  .vb-countdown-eleven-bar {
    grid-template-columns: 1fr;
    border-radius: 28px;
  }

  .vb-countdown-eleven-message {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .vb-countdown-eleven-message p {
    grid-column: 1 / -1;
  }

  .vb-countdown-eleven-button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .vb-countdown-eleven-message {
    grid-template-columns: 1fr;
  }

  .vb-countdown-eleven-message strong {
    white-space: normal;
  }

  .vb-countdown-eleven-timer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 340px) {
  .vb-countdown-eleven-timer {
    grid-template-columns: 1fr;
  }
}

This sticky top bar countdown timer is useful for ecommerce announcement bars, website-wide offers, free shipping campaigns, SaaS promotions, course launches, and limited-time header messages.

12. Hero Section Countdown Timer

A hero section countdown timer is useful for landing pages, product campaigns, startup launches, SaaS offers, event pages, course launches, and homepage promotions where the timer should be part of the main first-screen message.

This example uses a large hero layout with a split visual composition, layered gradient shapes, big headline, CTA buttons, trust badges, and a bold countdown panel. The JavaScript uses a repeating 10-day campaign cycle, so the timer keeps working without ending permanently.

Hero section countdown timer
Large landing page layout
Days, hours, minutes, and seconds
CTA buttons and trust badges
Responsive desktop and mobile hero section

Example 12

Hero Section Countdown Timer

Use this countdown timer inside a hero section for launches, landing pages, product campaigns, event pages, seasonal offers, and startup promotions.

Start Now

No credit card required Limited campaign Next cycle loading

Campaign ends in Countdown active

00 Days

00 Hours

00 Min

00 Sec

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-twelve]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 10;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-03T12:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextDateEl = timer.querySelector("[data-next-date]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextCampaignEnd(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateCountdown() {
    const now = Date.now();
    const nextEnd = getNextCampaignEnd(now);
    let remaining = nextEnd - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const dateText = new Date(nextEnd).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    nextDateEl.textContent = "Ends " + dateText;
    statusEl.textContent = "Countdown active";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-twelve-demo">
  <section class="vb-countdown-twelve-hero" data-vb-countdown-twelve data-cycle-days="10">
    <div class="vb-countdown-twelve-copy">
      <span class="vb-countdown-twelve-kicker">Example 12</span>
      <h3>Hero Section Countdown Timer</h3>
      <p>Use this countdown timer inside a hero section for launches, landing pages, product campaigns, event pages, seasonal offers, and startup promotions.</p>

      <div class="vb-countdown-twelve-actions">
        <a href="#hero-offer">Start Now</a>
        <button type="button">View Details</button>
      </div>

      <div class="vb-countdown-twelve-badges">
        <span>No credit card required</span>
        <span>Limited campaign</span>
        <span data-next-date>Next cycle loading</span>
      </div>
    </div>

    <div class="vb-countdown-twelve-card">
      <div class="vb-countdown-twelve-card-top">
        <span>Campaign ends in</span>
        <strong data-status>Countdown active</strong>
      </div>

      <div class="vb-countdown-twelve-timer" aria-label="Hero section countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>
    </div>
  </section>
</div>

CSS

.vb-countdown-twelve-demo,
.vb-countdown-twelve-demo * {
  box-sizing: border-box;
}

.vb-countdown-twelve-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 42px);
  border-radius: 54px 18px 54px 18px;
  background:
    radial-gradient(circle at 16% 18%, rgba(16, 185, 129, 0.20), transparent 34%),
    radial-gradient(circle at 88% 22%, rgba(59, 130, 246, 0.20), transparent 34%),
    linear-gradient(135deg, #ecfdf5 0%, #eff6ff 54%, #ffffff 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.20);
  box-shadow: 0 28px 80px rgba(5, 150, 105, 0.10);
}

.vb-countdown-twelve-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr);
  gap: clamp(24px, 4vw, 42px);
  align-items: center;
  max-width: 1160px;
  min-height: 560px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 54px);
  overflow: hidden;
  border-radius: 44px 12px 44px 12px;
  background:
    radial-gradient(circle at 24% 22%, rgba(255,255,255,0.20), transparent 34%),
    linear-gradient(135deg, #052e2b 0%, #064e3b 48%, #1d4ed8 100%) !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
}

.vb-countdown-twelve-hero::before {
  content: "";
  position: absolute;
  right: -140px;
  top: -160px;
  width: 390px;
  height: 390px;
  border-radius: 44% 56% 32% 68%;
  background: rgba(125, 211, 252, 0.18);
}

.vb-countdown-twelve-hero::after {
  content: "";
  position: absolute;
  left: 44%;
  bottom: -160px;
  width: 320px;
  height: 320px;
  border-radius: 68% 32% 58% 42%;
  background: rgba(52, 211, 153, 0.16);
}

.vb-countdown-twelve-copy,
.vb-countdown-twelve-card {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.vb-countdown-twelve-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px 999px 999px 4px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.18);
  color: #bbf7d0 !important;
  -webkit-text-fill-color: #bbf7d0 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-twelve-copy h3 {
  max-width: 820px;
  margin: 0 0 18px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(38px, 6.4vw, 88px) !important;
  line-height: 0.86 !important;
  font-weight: 950 !important;
  letter-spacing: -0.085em;
  overflow-wrap: anywhere;
}

.vb-countdown-twelve-copy p {
  max-width: 690px;
  margin: 0 0 24px !important;
  color: #dcfce7 !important;
  -webkit-text-fill-color: #dcfce7 !important;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-twelve-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.vb-countdown-twelve-actions a,
.vb-countdown-twelve-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.vb-countdown-twelve-actions a {
  background: #ffffff;
  color: #065f46 !important;
  -webkit-text-fill-color: #065f46 !important;
  text-decoration: none !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
}

.vb-countdown-twelve-actions button {
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.10);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.vb-countdown-twelve-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vb-countdown-twelve-badges span {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: #dbeafe !important;
  -webkit-text-fill-color: #dbeafe !important;
  font-size: 12px;
  font-weight: 850;
}

.vb-countdown-twelve-card {
  padding: clamp(20px, 3vw, 28px);
  border-radius: 18px 42px 18px 42px;
  background:
    radial-gradient(circle at 22% 16%, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.055)) !important;
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(14px);
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.22);
}

.vb-countdown-twelve-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.vb-countdown-twelve-card-top span {
  color: #bbf7d0 !important;
  -webkit-text-fill-color: #bbf7d0 !important;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vb-countdown-twelve-card-top strong {
  color: #dbeafe !important;
  -webkit-text-fill-color: #dbeafe !important;
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

.vb-countdown-twelve-timer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.vb-countdown-twelve-timer div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px 28px 16px 28px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
}

.vb-countdown-twelve-timer strong {
  min-width: 72px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-twelve-timer span {
  color: #d1fae5 !important;
  -webkit-text-fill-color: #d1fae5 !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

@media (max-width: 920px) {
  .vb-countdown-twelve-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .vb-countdown-twelve-timer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .vb-countdown-twelve-timer div {
    grid-template-columns: 1fr;
    place-items: center;
    text-align: center;
  }

  .vb-countdown-twelve-timer strong {
    min-width: 0;
    font-size: clamp(28px, 6vw, 44px);
  }
}

@media (max-width: 640px) {
  .vb-countdown-twelve-demo {
    border-radius: 34px 12px 34px 12px;
  }

  .vb-countdown-twelve-hero {
    border-radius: 28px 10px 28px 10px;
  }

  .vb-countdown-twelve-copy h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-twelve-actions a,
  .vb-countdown-twelve-actions button {
    width: 100%;
  }

  .vb-countdown-twelve-card-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .vb-countdown-twelve-card-top strong {
    text-align: left;
  }

  .vb-countdown-twelve-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-twelve-timer strong {
    font-size: clamp(30px, 13vw, 46px);
  }
}

@media (max-width: 360px) {
  .vb-countdown-twelve-timer {
    grid-template-columns: 1fr;
  }
}

This hero section countdown timer is useful for landing pages, SaaS launches, product campaigns, event pages, course launch sections, homepage promotions, and startup offer pages.

13. Minimal Inline Countdown Timer

A minimal inline countdown timer is useful for pricing pages, product pages, checkout messages, small promo banners, course enrollment notices, blog CTA sections, and compact website areas where a full countdown block would be too large.

This example uses a clean inline layout with a short message, compact timer chips, subtle border styling, and a simple call-to-action link. The JavaScript uses a repeating 3-hour offer window, so the demo keeps working and never stays stopped at zero.

Minimal inline countdown timer
Small compact timer chips
Hours, minutes, and seconds
Repeating offer window
Responsive inline promo layout

Example 13 Minimal Inline Countdown Timer

Compact countdown for small promo messages, pricing sections, checkout notices, and lightweight website CTAs.

00 Hrs

00 Min

00 Sec

Get Offer

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-thirteen]");
  if (!timer) return;

  const duration = Number(timer.getAttribute("data-duration")) || 10800;
  let remaining = duration;

  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function updateCountdown() {
    if (remaining <= 0) {
      remaining = duration;
    }

    const hours = Math.floor(remaining / 3600);
    const minutes = Math.floor((remaining / 60) % 60);
    const seconds = remaining % 60;

    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);

    remaining -= 1;
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-thirteen-demo">
  <div class="vb-countdown-thirteen-inline" data-vb-countdown-thirteen data-duration="10800">
    <div class="vb-countdown-thirteen-copy">
      <span>Example 13</span>
      <strong>Minimal Inline Countdown Timer</strong>
      <p>Compact countdown for small promo messages, pricing sections, checkout notices, and lightweight website CTAs.</p>
    </div>

    <div class="vb-countdown-thirteen-timer" aria-label="Minimal inline countdown timer">
      <div>
        <strong data-hours>00</strong>
        <span>Hrs</span>
      </div>

      <div>
        <strong data-minutes>00</strong>
        <span>Min</span>
      </div>

      <div>
        <strong data-seconds>00</strong>
        <span>Sec</span>
      </div>
    </div>

    <a href="#inline-offer">Get Offer</a>
  </div>
</div>

CSS

.vb-countdown-thirteen-demo,
.vb-countdown-thirteen-demo * {
  box-sizing: border-box;
}

.vb-countdown-thirteen-demo {
  margin: 28px 0;
  padding: clamp(16px, 3vw, 28px);
  border-radius: 22px;
  background:
    linear-gradient(135deg, #ffffff 0%, #f8fafc 52%, #f1f5f9 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
}

.vb-countdown-thirteen-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: clamp(14px, 2vw, 22px);
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(16px, 2.2vw, 22px);
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.vb-countdown-thirteen-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.vb-countdown-thirteen-copy span {
  display: inline-flex;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5 !important;
  -webkit-text-fill-color: #4f46e5 !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-countdown-thirteen-copy strong {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: clamp(18px, 3vw, 28px);
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.vb-countdown-thirteen-copy p {
  max-width: 680px;
  margin: 0 !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 650;
}

.vb-countdown-thirteen-timer {
  display: grid;
  grid-template-columns: repeat(3, minmax(56px, 1fr));
  gap: 8px;
  min-width: 0;
}

.vb-countdown-thirteen-timer div {
  min-width: 0;
  padding: 10px 8px;
  border-radius: 14px;
  background: #0f172a;
  text-align: center;
}

.vb-countdown-thirteen-timer strong {
  display: block;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.vb-countdown-thirteen-timer span {
  display: block;
  margin-top: 4px;
  color: #c7d2fe !important;
  -webkit-text-fill-color: #c7d2fe !important;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-thirteen-inline a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #4f46e5;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 14px 28px rgba(79, 70, 229, 0.20);
}

@media (max-width: 860px) {
  .vb-countdown-thirteen-inline {
    grid-template-columns: 1fr;
  }

  .vb-countdown-thirteen-inline a {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .vb-countdown-thirteen-timer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vb-countdown-thirteen-copy strong {
    font-size: 22px;
  }
}

@media (max-width: 320px) {
  .vb-countdown-thirteen-timer {
    grid-template-columns: 1fr;
  }
}

This minimal inline countdown timer is useful for compact promo rows, checkout reminders, product page notices, pricing page offers, course enrollment CTAs, and small website announcement sections.

14. Flip Clock Countdown Timer

A flip clock countdown timer is useful for launch pages, event pages, ecommerce campaigns, coming soon websites, product drops, conference pages, and premium landing pages that need a more visual timer style.

This example uses a retro flip-clock inspired design with split number cards, a dark stage background, metallic borders, and a centered campaign layout. The JavaScript uses a repeating 12-day cycle, so the countdown continues working instead of staying expired.

Flip clock countdown timer
Retro split-card number design
Days, hours, minutes, and seconds
Repeating launch cycle
Responsive flip timer layout

Example 14

Flip Clock Countdown Timer

Use this flip-style countdown timer for premium launches, event pages, coming soon campaigns, product drops, and visual landing page sections.

00 Days

00 Hours

00 Minutes

00 Seconds

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-fourteen]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 12;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-04T08:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextCycleEnd(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateCountdown() {
    const now = Date.now();
    const nextEnd = getNextCycleEnd(now);
    let remaining = nextEnd - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    statusEl.textContent = "Launch countdown is active.";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-fourteen-demo">
  <section class="vb-countdown-fourteen-stage" data-vb-countdown-fourteen data-cycle-days="12">
    <div class="vb-countdown-fourteen-header">
      <span>Example 14</span>
      <h3>Flip Clock Countdown Timer</h3>
      <p>Use this flip-style countdown timer for premium launches, event pages, coming soon campaigns, product drops, and visual landing page sections.</p>
    </div>

    <div class="vb-countdown-fourteen-clock" aria-label="Flip clock countdown timer">
      <div class="vb-countdown-fourteen-unit">
        <strong data-days>00</strong>
        <span>Days</span>
      </div>

      <div class="vb-countdown-fourteen-unit">
        <strong data-hours>00</strong>
        <span>Hours</span>
      </div>

      <div class="vb-countdown-fourteen-unit">
        <strong data-minutes>00</strong>
        <span>Minutes</span>
      </div>

      <div class="vb-countdown-fourteen-unit">
        <strong data-seconds>00</strong>
        <span>Seconds</span>
      </div>
    </div>

    <div class="vb-countdown-fourteen-footer">
      <p data-status>Launch countdown is active.</p>
      <a href="#flip-clock-launch">Join Launch List</a>
    </div>
  </section>
</div>

CSS

.vb-countdown-fourteen-demo,
.vb-countdown-fourteen-demo * {
  box-sizing: border-box;
}

.vb-countdown-fourteen-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 42px);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 18%, rgba(234, 179, 8, 0.18), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(148, 163, 184, 0.16), transparent 34%),
    linear-gradient(135deg, #f8fafc 0%, #fefce8 52%, #ffffff 100%) !important;
  border: 1px solid rgba(234, 179, 8, 0.22);
  box-shadow: 0 28px 80px rgba(113, 63, 18, 0.10);
}

.vb-countdown-fourteen-stage {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 50px);
  overflow: hidden;
  border-radius: 12px 42px 12px 42px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(135deg, #020617 0%, #111827 54%, #1f2937 100%) !important;
  background-size: 34px 34px, 34px 34px, auto !important;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 90px rgba(2, 6, 23, 0.36);
}

.vb-countdown-fourteen-stage::before {
  content: "";
  position: absolute;
  left: -100px;
  top: -120px;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background: rgba(234, 179, 8, 0.15);
  filter: blur(2px);
}

.vb-countdown-fourteen-stage::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  filter: blur(2px);
}

.vb-countdown-fourteen-header,
.vb-countdown-fourteen-clock,
.vb-countdown-fourteen-footer {
  position: relative;
  z-index: 2;
}

.vb-countdown-fourteen-header {
  max-width: 820px;
  margin: 0 auto 28px;
  text-align: center;
}

.vb-countdown-fourteen-header span {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(234, 179, 8, 0.14);
  border: 1px solid rgba(250, 204, 21, 0.22);
  color: #fde68a !important;
  -webkit-text-fill-color: #fde68a !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vb-countdown-fourteen-header h3 {
  margin: 0 0 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(36px, 6vw, 78px) !important;
  line-height: 0.9 !important;
  font-weight: 950 !important;
  letter-spacing: -0.08em;
  overflow-wrap: anywhere;
}

.vb-countdown-fourteen-header p {
  max-width: 720px;
  margin: 0 auto !important;
  color: #d1d5db !important;
  -webkit-text-fill-color: #d1d5db !important;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-fourteen-clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 18px);
  margin: 0 auto 26px;
}

.vb-countdown-fourteen-unit {
  min-width: 0;
  display: grid;
  gap: 10px;
  text-align: center;
}

.vb-countdown-fourteen-unit strong {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(92px, 12vw, 145px);
  padding: 14px 8px;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(to bottom, #111827 0%, #111827 49%, #020617 50%, #020617 100%) !important;
  border: 1px solid rgba(255,255,255,0.12);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(38px, 7vw, 76px);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: -0.065em;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 20px 46px rgba(0,0,0,0.28);
}

.vb-countdown-fourteen-unit strong::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,0.16);
}

.vb-countdown-fourteen-unit strong::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  height: 28%;
  border-radius: 8px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent);
}

.vb-countdown-fourteen-unit span {
  display: inline-flex;
  justify-content: center;
  color: #fde68a !important;
  -webkit-text-fill-color: #fde68a !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-countdown-fourteen-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.vb-countdown-fourteen-footer p {
  margin: 0 !important;
  color: #e5e7eb !important;
  -webkit-text-fill-color: #e5e7eb !important;
  font-size: 14px;
  font-weight: 750;
}

.vb-countdown-fourteen-footer a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eab308, #f97316);
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(234, 179, 8, 0.22);
}

@media (max-width: 820px) {
  .vb-countdown-fourteen-clock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-fourteen-unit strong {
    font-size: clamp(44px, 13vw, 72px);
  }
}

@media (max-width: 640px) {
  .vb-countdown-fourteen-stage {
    border-radius: 10px 28px 10px 28px;
  }

  .vb-countdown-fourteen-header h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-fourteen-footer a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-fourteen-clock {
    grid-template-columns: 1fr;
  }
}

This flip clock countdown timer is useful for launch pages, event landing pages, coming soon websites, premium ecommerce campaigns, digital product drops, conference pages, and visual promotional sections.

15. Card Grid Countdown Timer

A card grid countdown timer is useful for product grids, course grids, event listings, deal sections, marketplace offers, pricing blocks, and landing pages where several countdown cards need to sit in a clean responsive layout.

This example uses a modern card grid layout with three promotional cards, a main countdown card, soft shadows, rounded product blocks, and responsive behavior for tablet and mobile screens. The JavaScript uses a repeating 5-day cycle, so the demo keeps working over time.

Card grid countdown timer
Responsive promotional card layout
Days, hours, minutes, and seconds
Useful for product and course grids
Repeating JavaScript countdown cycle

Example 15

Card Grid Countdown Timer

Use this countdown card grid for product offers, course launches, marketplace deals, event cards, and landing page promotion blocks.

00 Days

00 Hours

00 Min

00 Sec

View Campaign

Product Deal Save 25%

Limited card offer for featured products.

Course Offer Early Access

Enrollment window closes soon.

Campaign active Next cycle loading

The timer stays active with a repeating cycle.

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-fifteen]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 5;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-02T10:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextCycleEl = timer.querySelector("[data-next-cycle]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextCycleEnd(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateCountdown() {
    const now = Date.now();
    const nextEnd = getNextCycleEnd(now);
    let remaining = nextEnd - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const dateText = new Date(nextEnd).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    nextCycleEl.textContent = "Ends " + dateText;
    statusEl.textContent = "Campaign active";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-fifteen-demo">
  <section class="vb-countdown-fifteen-grid" data-vb-countdown-fifteen data-cycle-days="5">
    <div class="vb-countdown-fifteen-card vb-countdown-fifteen-main">
      <span class="vb-countdown-fifteen-kicker">Example 15</span>
      <h3>Card Grid Countdown Timer</h3>
      <p>Use this countdown card grid for product offers, course launches, marketplace deals, event cards, and landing page promotion blocks.</p>

      <div class="vb-countdown-fifteen-timer" aria-label="Card grid countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <a href="#grid-offer">View Campaign</a>
    </div>

    <div class="vb-countdown-fifteen-card vb-countdown-fifteen-small">
      <span>Product Deal</span>
      <strong>Save 25%</strong>
      <p>Limited card offer for featured products.</p>
    </div>

    <div class="vb-countdown-fifteen-card vb-countdown-fifteen-small">
      <span>Course Offer</span>
      <strong>Early Access</strong>
      <p>Enrollment window closes soon.</p>
    </div>

    <div class="vb-countdown-fifteen-card vb-countdown-fifteen-small">
      <span data-status>Campaign active</span>
      <strong data-next-cycle>Next cycle loading</strong>
      <p>The timer stays active with a repeating cycle.</p>
    </div>
  </section>
</div>

CSS

.vb-countdown-fifteen-demo,
.vb-countdown-fifteen-demo * {
  box-sizing: border-box;
}

.vb-countdown-fifteen-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 38px);
  border-radius: 40px;
  background:
    radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.15), transparent 34%),
    radial-gradient(circle at 85% 18%, rgba(236, 72, 153, 0.13), transparent 34%),
    linear-gradient(135deg, #f8fafc 0%, #fdf2f8 54%, #ffffff 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.18);
  box-shadow: 0 28px 80px rgba(49, 46, 129, 0.09);
}

.vb-countdown-fifteen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 18px);
  max-width: 1120px;
  margin: 0 auto;
}

.vb-countdown-fifteen-card {
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
}

.vb-countdown-fifteen-main {
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 5vw, 48px);
  border-radius: 34px 12px 34px 12px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(135deg, #312e81 0%, #4f46e5 50%, #be185d 100%) !important;
}

.vb-countdown-fifteen-kicker {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.18);
  color: #e0e7ff !important;
  -webkit-text-fill-color: #e0e7ff !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-fifteen-main h3 {
  max-width: 760px;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(36px, 6vw, 80px) !important;
  line-height: 0.88 !important;
  font-weight: 950 !important;
  letter-spacing: -0.08em;
  overflow-wrap: anywhere;
}

.vb-countdown-fifteen-main p {
  max-width: 660px;
  margin: 0 0 24px !important;
  color: #fce7f3 !important;
  -webkit-text-fill-color: #fce7f3 !important;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-fifteen-timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 12px);
  margin-bottom: 22px;
}

.vb-countdown-fifteen-timer div {
  min-width: 0;
  padding: clamp(15px, 2.4vw, 22px) 8px;
  border-radius: 20px 20px 6px 20px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.16);
  text-align: center;
}

.vb-countdown-fifteen-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 7px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(28px, 4.7vw, 54px);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-fifteen-timer span {
  display: block;
  color: #fbcfe8 !important;
  -webkit-text-fill-color: #fbcfe8 !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-fifteen-main a {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 20px;
  border-radius: 999px;
  background: #ffffff;
  color: #4f46e5 !important;
  -webkit-text-fill-color: #4f46e5 !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.20);
}

.vb-countdown-fifteen-small {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: clamp(18px, 3vw, 24px);
  border-radius: 10px 28px 10px 28px;
}

.vb-countdown-fifteen-small:nth-child(2) {
  background: #fff7ed;
}

.vb-countdown-fifteen-small:nth-child(3) {
  background: #ecfdf5;
}

.vb-countdown-fifteen-small:nth-child(4) {
  background: #eef2ff;
}

.vb-countdown-fifteen-small span {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vb-countdown-fifteen-small strong {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
}

.vb-countdown-fifteen-small p {
  margin: 0 !important;
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 650;
}

@media (max-width: 900px) {
  .vb-countdown-fifteen-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .vb-countdown-fifteen-main {
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .vb-countdown-fifteen-main h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-fifteen-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-fifteen-timer strong {
    font-size: clamp(30px, 13vw, 48px);
  }

  .vb-countdown-fifteen-main a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-fifteen-timer {
    grid-template-columns: 1fr;
  }
}

This card grid countdown timer is useful for ecommerce deal grids, event cards, course launch cards, marketplace promotions, product offer sections, and responsive landing page campaign blocks.

16. Coupon Expiry Countdown Timer

A coupon expiry countdown timer is useful for discount codes, ecommerce checkout pages, popup offers, coupon landing pages, email campaign pages, cart recovery pages, and promotional banners where visitors need to use a coupon before it expires.

This example uses a coupon-style layout with dashed borders, a tear-off edge, coupon code block, timer strip, and clear call-to-action button. The JavaScript uses a repeating 8-hour coupon window, so the demo stays active and never remains stopped at zero.

Coupon expiry countdown timer
Coupon code and discount layout
Hours, minutes, and seconds
Repeating coupon window
Responsive ecommerce coupon design

Example 16

Coupon Expiry Countdown Timer

Use this countdown timer for coupon codes, checkout discounts, popup offers, cart recovery campaigns, and promotional landing pages.

Coupon Code SAVE30

30% OFF

Coupon expires soon.

00 Hours

00 Min

00 Sec

Use Coupon

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-sixteen]");
  if (!timer) return;

  const duration = Number(timer.getAttribute("data-duration")) || 28800;
  let remaining = duration;

  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function updateCountdown() {
    if (remaining <= 0) {
      remaining = duration;
    }

    const hours = Math.floor(remaining / 3600);
    const minutes = Math.floor((remaining / 60) % 60);
    const seconds = remaining % 60;

    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    statusEl.textContent = "Coupon expires soon.";

    remaining -= 1;
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-sixteen-demo">
  <section class="vb-countdown-sixteen-coupon" data-vb-countdown-sixteen data-duration="28800">
    <div class="vb-countdown-sixteen-left">
      <span class="vb-countdown-sixteen-kicker">Example 16</span>
      <h3>Coupon Expiry Countdown Timer</h3>
      <p>Use this countdown timer for coupon codes, checkout discounts, popup offers, cart recovery campaigns, and promotional landing pages.</p>

      <div class="vb-countdown-sixteen-code">
        <span>Coupon Code</span>
        <strong>SAVE30</strong>
      </div>
    </div>

    <div class="vb-countdown-sixteen-divider"></div>

    <div class="vb-countdown-sixteen-right">
      <strong class="vb-countdown-sixteen-offer">30% OFF</strong>
      <p data-status>Coupon expires soon.</p>

      <div class="vb-countdown-sixteen-timer" aria-label="Coupon expiry countdown timer">
        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <a href="#coupon-offer">Use Coupon</a>
    </div>
  </section>
</div>

CSS

.vb-countdown-sixteen-demo,
.vb-countdown-sixteen-demo * {
  box-sizing: border-box;
}

.vb-countdown-sixteen-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 38px);
  border-radius: 26px;
  background:
    radial-gradient(circle at 15% 20%, rgba(245, 158, 11, 0.16), transparent 34%),
    radial-gradient(circle at 85% 20%, rgba(244, 63, 94, 0.14), transparent 34%),
    linear-gradient(135deg, #fffbeb 0%, #fff1f2 52%, #ffffff 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.22);
  box-shadow: 0 28px 80px rgba(120, 53, 15, 0.09);
}

.vb-countdown-sixteen-coupon {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26px minmax(250px, 360px);
  gap: clamp(16px, 2.6vw, 24px);
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 26px);
  overflow: hidden;
  border-radius: 30px;
  background: #ffffff;
  border: 2px dashed rgba(245, 158, 11, 0.42);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
}

.vb-countdown-sixteen-coupon::before,
.vb-countdown-sixteen-coupon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fffbeb;
  border: 1px solid rgba(245, 158, 11, 0.20);
  transform: translateY(-50%);
  z-index: 3;
}

.vb-countdown-sixteen-coupon::before {
  left: -22px;
}

.vb-countdown-sixteen-coupon::after {
  right: -22px;
}

.vb-countdown-sixteen-left,
.vb-countdown-sixteen-right {
  min-width: 0;
}

.vb-countdown-sixteen-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 3vw, 28px);
}

.vb-countdown-sixteen-kicker {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px 999px 4px 999px;
  background: #fef3c7;
  color: #92400e !important;
  -webkit-text-fill-color: #92400e !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-sixteen-left h3 {
  max-width: 740px;
  margin: 0 0 16px !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: clamp(36px, 5.8vw, 76px) !important;
  line-height: 0.9 !important;
  font-weight: 950 !important;
  letter-spacing: -0.08em;
  overflow-wrap: anywhere;
}

.vb-countdown-sixteen-left p {
  max-width: 650px;
  margin: 0 0 22px !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.72;
  font-weight: 650;
}

.vb-countdown-sixteen-code {
  display: inline-grid;
  gap: 6px;
  align-self: flex-start;
  max-width: 100%;
  padding: 16px 20px;
  border-radius: 18px 6px 18px 6px;
  background: #0f172a;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
}

.vb-countdown-sixteen-code span {
  color: #fed7aa !important;
  -webkit-text-fill-color: #fed7aa !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-countdown-sixteen-code strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.vb-countdown-sixteen-divider {
  position: relative;
  min-height: 100%;
  border-left: 2px dashed rgba(245, 158, 11, 0.40);
}

.vb-countdown-sixteen-divider::before,
.vb-countdown-sixteen-divider::after {
  content: "";
  position: absolute;
  left: -14px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fffbeb;
  border: 1px solid rgba(245, 158, 11, 0.20);
}

.vb-countdown-sixteen-divider::before {
  top: -28px;
}

.vb-countdown-sixteen-divider::after {
  bottom: -28px;
}

.vb-countdown-sixteen-right {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: clamp(18px, 3vw, 26px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.20), transparent 34%),
    linear-gradient(135deg, #f97316 0%, #e11d48 100%) !important;
  color: #ffffff;
}

.vb-countdown-sixteen-offer {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(42px, 7vw, 68px);
  line-height: 0.88;
  font-weight: 950;
  letter-spacing: -0.08em;
}

.vb-countdown-sixteen-right p {
  margin: 0 !important;
  color: #fff7ed !important;
  -webkit-text-fill-color: #fff7ed !important;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 750;
}

.vb-countdown-sixteen-timer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.vb-countdown-sixteen-timer div {
  min-width: 0;
  padding: 14px 7px;
  border-radius: 16px 6px 16px 6px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.18);
  text-align: center;
}

.vb-countdown-sixteen-timer strong {
  display: block;
  margin-bottom: 5px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(26px, 5vw, 40px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.vb-countdown-sixteen-timer span {
  display: block;
  color: #ffedd5 !important;
  -webkit-text-fill-color: #ffedd5 !important;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-sixteen-right a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: #be123c !important;
  -webkit-text-fill-color: #be123c !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
}

@media (max-width: 900px) {
  .vb-countdown-sixteen-coupon {
    grid-template-columns: 1fr;
  }

  .vb-countdown-sixteen-divider {
    min-height: 0;
    height: 2px;
    border-left: 0;
    border-top: 2px dashed rgba(245, 158, 11, 0.40);
  }

  .vb-countdown-sixteen-divider::before,
  .vb-countdown-sixteen-divider::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .vb-countdown-sixteen-left h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-sixteen-code {
    width: 100%;
  }

  .vb-countdown-sixteen-right a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-sixteen-timer {
    grid-template-columns: 1fr;
  }
}

This coupon expiry countdown timer is useful for ecommerce coupon codes, checkout discounts, popup offers, cart recovery campaigns, email campaign landing pages, and limited-time promotional banners.

17. Course Enrollment Countdown Timer

A course enrollment countdown timer is useful for online course pages, academy websites, coaching programs, learning platforms, cohort-based courses, early-bird enrollment campaigns, and training landing pages. It helps show when enrollment closes and encourages visitors to join before the deadline.

This example uses a clean course landing page style with a lesson preview card, enrollment badge, instructor-style information block, countdown modules, and a course CTA button. The JavaScript uses a repeating 14-day enrollment cycle, so the demo keeps working over time and never stays stopped at zero.

Course enrollment countdown timer
Online course landing page layout
Days, hours, minutes, and seconds
Repeating enrollment cycle
Responsive course CTA section

Example 17

12 modules Enrollment open

Online Course

Course Enrollment Countdown Timer

Use this countdown timer for online course launches, cohort-based programs, academy pages, training campaigns, and enrollment deadline sections.

Beginner friendly Certificate included Enrollment window loading

00 Days

00 Hours

00 Min

00 Sec

Enrollment is open for the next course window.

Enroll Now

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-seventeen]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 14;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-08T11:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextEnrollmentEl = timer.querySelector("[data-next-enrollment]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextEnrollmentEnd(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateCountdown() {
    const now = Date.now();
    const nextEnd = getNextEnrollmentEnd(now);
    let remaining = nextEnd - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const dateText = new Date(nextEnd).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    nextEnrollmentEl.textContent = "Enrollment closes " + dateText;
    statusEl.textContent = "Enrollment is open for the next course window.";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-seventeen-demo">
  <section class="vb-countdown-seventeen-course" data-vb-countdown-seventeen data-cycle-days="14">
    <div class="vb-countdown-seventeen-preview">
      <span class="vb-countdown-seventeen-tag">Example 17</span>

      <div class="vb-countdown-seventeen-screen">
        <div class="vb-countdown-seventeen-screen-top">
          <i></i>
          <i></i>
          <i></i>
        </div>
        <div class="vb-countdown-seventeen-lines">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

      <div class="vb-countdown-seventeen-module">
        <strong>12 modules</strong>
        <span>Enrollment open</span>
      </div>
    </div>

    <div class="vb-countdown-seventeen-content">
      <span class="vb-countdown-seventeen-kicker">Online Course</span>
      <h3>Course Enrollment Countdown Timer</h3>
      <p>Use this countdown timer for online course launches, cohort-based programs, academy pages, training campaigns, and enrollment deadline sections.</p>

      <div class="vb-countdown-seventeen-meta">
        <span>Beginner friendly</span>
        <span>Certificate included</span>
        <span data-next-enrollment>Enrollment window loading</span>
      </div>

      <div class="vb-countdown-seventeen-timer" aria-label="Course enrollment countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <p class="vb-countdown-seventeen-status" data-status>Enrollment is open for the next course window.</p>

      <a href="#course-enrollment">Enroll Now</a>
    </div>
  </section>
</div>

CSS

.vb-countdown-seventeen-demo,
.vb-countdown-seventeen-demo * {
  box-sizing: border-box;
}

.vb-countdown-seventeen-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 40px);
  border-radius: 56px 18px 18px 56px;
  background:
    radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.17), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(16, 185, 129, 0.16), transparent 34%),
    linear-gradient(135deg, #eff6ff 0%, #ecfdf5 54%, #ffffff 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.20);
  box-shadow: 0 28px 80px rgba(30, 64, 175, 0.10);
}

.vb-countdown-seventeen-course {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(22px, 4vw, 38px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 26px);
  border-radius: 42px 12px 12px 42px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
}

.vb-countdown-seventeen-preview {
  position: relative;
  min-width: 0;
  min-height: clamp(330px, 42vw, 480px);
  overflow: hidden;
  border-radius: 34px 10px 10px 34px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,0.30), transparent 34%),
    linear-gradient(135deg, #1e3a8a 0%, #2563eb 52%, #10b981 100%) !important;
}

.vb-countdown-seventeen-tag {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 4;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.22);
  color: #dbeafe !important;
  -webkit-text-fill-color: #dbeafe !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-seventeen-screen {
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(78%, 310px);
  min-height: 230px;
  transform: translate(-50%, -50%) rotate(-4deg);
  border-radius: 24px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 28px 76px rgba(15, 23, 42, 0.22);
  overflow: hidden;
}

.vb-countdown-seventeen-screen-top {
  display: flex;
  gap: 7px;
  padding: 14px;
  background: #0f172a;
}

.vb-countdown-seventeen-screen-top i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #60a5fa;
}

.vb-countdown-seventeen-screen-top i:nth-child(2) {
  background: #34d399;
}

.vb-countdown-seventeen-screen-top i:nth-child(3) {
  background: #facc15;
}

.vb-countdown-seventeen-lines {
  display: grid;
  gap: 14px;
  padding: 24px;
}

.vb-countdown-seventeen-lines span {
  display: block;
  height: 18px;
  border-radius: 999px;
  background: #dbeafe;
}

.vb-countdown-seventeen-lines span:nth-child(1) {
  width: 84%;
}

.vb-countdown-seventeen-lines span:nth-child(2) {
  width: 62%;
  background: #bbf7d0;
}

.vb-countdown-seventeen-lines span:nth-child(3) {
  width: 74%;
  background: #e0e7ff;
}

.vb-countdown-seventeen-module {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-radius: 22px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
}

.vb-countdown-seventeen-module strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.vb-countdown-seventeen-module span {
  color: #bbf7d0 !important;
  -webkit-text-fill-color: #bbf7d0 !important;
  font-size: 12px;
  font-weight: 850;
}

.vb-countdown-seventeen-content {
  min-width: 0;
  padding: clamp(10px, 2vw, 18px);
}

.vb-countdown-seventeen-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px 999px 999px 4px;
  background: #dbeafe;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-seventeen-content h3 {
  max-width: 760px;
  margin: 0 0 16px !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: clamp(34px, 5.8vw, 76px) !important;
  line-height: 0.9 !important;
  font-weight: 950 !important;
  letter-spacing: -0.08em;
  overflow-wrap: anywhere;
}

.vb-countdown-seventeen-content p {
  max-width: 680px;
  margin: 0 0 22px !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-seventeen-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.vb-countdown-seventeen-meta span {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-size: 12px;
  font-weight: 850;
}

.vb-countdown-seventeen-timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 12px);
  margin-bottom: 18px;
}

.vb-countdown-seventeen-timer div {
  min-width: 0;
  padding: clamp(15px, 2.4vw, 20px) 8px;
  border-radius: 10px 24px 10px 24px;
  background: #0f172a;
  text-align: center;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.vb-countdown-seventeen-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 7px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(28px, 4.5vw, 50px);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-seventeen-timer span {
  display: block;
  color: #93c5fd !important;
  -webkit-text-fill-color: #93c5fd !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-seventeen-status {
  margin-bottom: 18px !important;
}

.vb-countdown-seventeen-content a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 20px;
  border-radius: 999px 999px 999px 8px;
  background: linear-gradient(135deg, #2563eb, #10b981);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.22);
}

@media (max-width: 920px) {
  .vb-countdown-seventeen-course {
    grid-template-columns: 1fr;
  }

  .vb-countdown-seventeen-preview {
    border-radius: 30px 10px 10px 30px;
  }
}

@media (max-width: 640px) {
  .vb-countdown-seventeen-demo {
    border-radius: 34px 12px 12px 34px;
  }

  .vb-countdown-seventeen-course {
    border-radius: 28px 10px 10px 28px;
  }

  .vb-countdown-seventeen-content h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-seventeen-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-seventeen-timer strong {
    font-size: clamp(30px, 13vw, 46px);
  }

  .vb-countdown-seventeen-content a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-seventeen-timer {
    grid-template-columns: 1fr;
  }
}

This course enrollment countdown timer is useful for online course landing pages, academy websites, cohort launches, coaching programs, training pages, course discounts, and enrollment deadline sections.

18. Booking Deadline Countdown Timer

A booking deadline countdown timer is useful for hotel bookings, appointment pages, travel packages, event reservations, restaurant bookings, consultation pages, service businesses, and limited booking windows where visitors need to reserve before a deadline.

This example uses a booking-focused layout with a calendar-inspired side panel, deadline notice, availability cards, countdown display, and reservation button. The JavaScript uses a repeating 72-hour booking window, so the demo keeps working and never remains expired.

Booking deadline countdown timer
Reservation and availability layout
Days, hours, minutes, and seconds
Repeating booking deadline window
Responsive service booking section

Example 18 -- Booking

Reservation Deadline

Booking Deadline Countdown Timer

Use this countdown timer for appointments, hotel bookings, travel deals, restaurant reservations, event bookings, and service-based landing pages.

6 slots Available today

24h Response time

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-eighteen]");
  if (!timer) return;

  const duration = Number(timer.getAttribute("data-duration")) || 259200;
  let remaining = duration;

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const statusEl = timer.querySelector("[data-status]");
  const calendarDayEl = timer.querySelector("[data-calendar-day]");
  const calendarMonthEl = timer.querySelector("[data-calendar-month]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function updateCalendarPreview() {
    const deadline = new Date(Date.now() + remaining * 1000);
    calendarDayEl.textContent = formatNumber(deadline.getDate());
    calendarMonthEl.textContent = deadline.toLocaleString("en-US", { month: "short" });
  }

  function updateCountdown() {
    if (remaining <= 0) {
      remaining = duration;
    }

    const days = Math.floor(remaining / 86400);
    const hours = Math.floor((remaining / 3600) % 24);
    const minutes = Math.floor((remaining / 60) % 60);
    const seconds = remaining % 60;

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    statusEl.textContent = "Booking deadline active";

    updateCalendarPreview();
    remaining -= 1;
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-eighteen-demo">
  <section class="vb-countdown-eighteen-booking" data-vb-countdown-eighteen data-duration="259200">
    <div class="vb-countdown-eighteen-calendar">
      <span>Example 18</span>
      <strong data-calendar-day>--</strong>
      <small data-calendar-month>Booking</small>
    </div>

    <div class="vb-countdown-eighteen-content">
      <div class="vb-countdown-eighteen-label">Reservation Deadline</div>
      <h3>Booking Deadline Countdown Timer</h3>
      <p>Use this countdown timer for appointments, hotel bookings, travel deals, restaurant reservations, event bookings, and service-based landing pages.</p>

      <div class="vb-countdown-eighteen-availability">
        <div>
          <strong>6 slots</strong>
          <span>Available today</span>
        </div>
        <div>
          <strong>24h</strong>
          <span>Response time</span>
        </div>
      </div>
    </div>

    <aside class="vb-countdown-eighteen-panel">
      <span data-status>Booking deadline active</span>

      <div class="vb-countdown-eighteen-timer" aria-label="Booking deadline countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <a href="#booking-deadline">Reserve Booking</a>
    </aside>
  </section>
</div>

CSS

.vb-countdown-eighteen-demo,
.vb-countdown-eighteen-demo * {
  box-sizing: border-box;
}

.vb-countdown-eighteen-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 38px);
  border-radius: 14px 50px 50px 14px;
  background:
    radial-gradient(circle at 16% 20%, rgba(14, 165, 233, 0.16), transparent 34%),
    radial-gradient(circle at 88% 24%, rgba(245, 158, 11, 0.14), transparent 34%),
    linear-gradient(135deg, #f0f9ff 0%, #fffbeb 52%, #ffffff 100%) !important;
  border: 1px solid rgba(14, 165, 233, 0.20);
  box-shadow: 0 28px 80px rgba(3, 105, 161, 0.09);
}

.vb-countdown-eighteen-booking {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(18px, 3vw, 26px);
  align-items: stretch;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(14px, 2vw, 18px);
  border-radius: 10px 38px 38px 10px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
}

.vb-countdown-eighteen-calendar {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 340px;
  border-radius: 8px 28px 28px 8px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.25), transparent 34%),
    linear-gradient(135deg, #0369a1 0%, #0ea5e9 52%, #f59e0b 100%) !important;
  color: #ffffff;
}

.vb-countdown-eighteen-calendar span {
  color: #e0f2fe !important;
  -webkit-text-fill-color: #e0f2fe !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-eighteen-calendar strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(54px, 8vw, 88px);
  line-height: 0.85;
  font-weight: 950;
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
}

.vb-countdown-eighteen-calendar small {
  color: #fff7ed !important;
  -webkit-text-fill-color: #fff7ed !important;
  font-size: 14px;
  font-weight: 900;
}

.vb-countdown-eighteen-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(18px, 3vw, 28px) 6px;
}

.vb-countdown-eighteen-label {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 8px 999px 999px 8px;
  background: #e0f2fe;
  color: #0369a1 !important;
  -webkit-text-fill-color: #0369a1 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-countdown-eighteen-content h3 {
  max-width: 740px;
  margin: 0 0 14px !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: clamp(34px, 5.5vw, 70px) !important;
  line-height: 0.92 !important;
  font-weight: 950 !important;
  letter-spacing: -0.075em;
  overflow-wrap: anywhere;
}

.vb-countdown-eighteen-content p {
  max-width: 680px;
  margin: 0 0 22px !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.72;
  font-weight: 650;
}

.vb-countdown-eighteen-availability {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  gap: 12px;
}

.vb-countdown-eighteen-availability div {
  min-width: 0;
  padding: 16px;
  border-radius: 20px 8px 20px 8px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.vb-countdown-eighteen-availability strong {
  display: block;
  margin-bottom: 6px;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.vb-countdown-eighteen-availability span {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 12px;
  font-weight: 850;
}

.vb-countdown-eighteen-panel {
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
  padding: clamp(20px, 3vw, 26px);
  border-radius: 32px;
  background:
    radial-gradient(circle at 24% 16%, rgba(255,255,255,0.16), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #075985 54%, #0c4a6e 100%) !important;
  box-shadow: 0 24px 70px rgba(3, 105, 161, 0.18);
}

.vb-countdown-eighteen-panel > span {
  display: inline-flex;
  justify-self: start;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: #bae6fd !important;
  -webkit-text-fill-color: #bae6fd !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vb-countdown-eighteen-timer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vb-countdown-eighteen-timer div {
  min-width: 0;
  padding: 16px 8px;
  border-radius: 20px 6px 20px 6px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.13);
  text-align: center;
}

.vb-countdown-eighteen-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 6px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(30px, 6vw, 48px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-eighteen-timer span {
  display: block;
  color: #fed7aa !important;
  -webkit-text-fill-color: #fed7aa !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-eighteen-panel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9, #f59e0b);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(14, 165, 233, 0.22);
}

@media (max-width: 980px) {
  .vb-countdown-eighteen-booking {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .vb-countdown-eighteen-panel {
    grid-column: 1 / -1;
  }

  .vb-countdown-eighteen-timer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .vb-countdown-eighteen-booking {
    grid-template-columns: 1fr;
  }

  .vb-countdown-eighteen-calendar {
    min-height: 190px;
    border-radius: 8px 24px 24px 8px;
  }

  .vb-countdown-eighteen-content h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-eighteen-availability {
    grid-template-columns: 1fr;
  }

  .vb-countdown-eighteen-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-eighteen-panel a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-eighteen-timer {
    grid-template-columns: 1fr;
  }
}

This booking deadline countdown timer is useful for appointment booking pages, hotel deals, restaurant reservation sections, travel packages, event booking pages, service websites, and limited reservation campaigns.

19. Auction Countdown Timer

An auction countdown timer is useful for bidding pages, marketplace auctions, NFT-style listings, collectible sales, product auctions, ticket auctions, and limited bidding windows where visitors need to place a bid before time runs out.

This example uses a bidding-focused auction layout with a current bid panel, bidder activity cards, countdown blocks, and a strong bid CTA. The JavaScript uses a repeating 48-hour auction window, so the demo keeps working and never remains stopped at zero.

Auction countdown timer
Current bid and bidder layout
Days, hours, minutes, and seconds
Repeating auction window
Responsive marketplace auction section

Example 19

Auction Countdown Timer

Use this countdown timer for auction listings, bidding pages, marketplace offers, collectible drops, limited product auctions, and high-value sale pages.

Current Bid €1,240 18 active bidders

Top Bidder Buyer #482

Bid Step €25

Live auction active Place your bid

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-nineteen]");
  if (!timer) return;

  const duration = Number(timer.getAttribute("data-duration")) || 172800;
  let remaining = duration;

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function updateCountdown() {
    if (remaining <= 0) {
      remaining = duration;
    }

    const days = Math.floor(remaining / 86400);
    const hours = Math.floor((remaining / 3600) % 24);
    const minutes = Math.floor((remaining / 60) % 60);
    const seconds = remaining % 60;

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    statusEl.textContent = "Live auction active";

    remaining -= 1;
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-nineteen-demo">
  <section class="vb-countdown-nineteen-auction" data-vb-countdown-nineteen data-duration="172800">
    <div class="vb-countdown-nineteen-item">
      <span class="vb-countdown-nineteen-kicker">Example 19</span>
      <h3>Auction Countdown Timer</h3>
      <p>Use this countdown timer for auction listings, bidding pages, marketplace offers, collectible drops, limited product auctions, and high-value sale pages.</p>

      <div class="vb-countdown-nineteen-bid">
        <span>Current Bid</span>
        <strong>€1,240</strong>
        <small>18 active bidders</small>
      </div>
    </div>

    <div class="vb-countdown-nineteen-activity">
      <div>
        <span>Top Bidder</span>
        <strong>Buyer #482</strong>
      </div>
      <div>
        <span>Bid Step</span>
        <strong>€25</strong>
      </div>
      <div>
        <span data-status>Live auction active</span>
        <strong>Place your bid</strong>
      </div>
    </div>

    <aside class="vb-countdown-nineteen-panel">
      <strong class="vb-countdown-nineteen-panel-title">Auction ends in</strong>

      <div class="vb-countdown-nineteen-timer" aria-label="Auction countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <a href="#auction-bid">Place Bid</a>
    </aside>
  </section>
</div>

CSS

.vb-countdown-nineteen-demo,
.vb-countdown-nineteen-demo * {
  box-sizing: border-box;
}

.vb-countdown-nineteen-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 40px);
  border-radius: 12px 54px 12px 54px;
  background:
    radial-gradient(circle at 14% 18%, rgba(168, 85, 247, 0.16), transparent 34%),
    radial-gradient(circle at 88% 24%, rgba(251, 191, 36, 0.15), transparent 34%),
    linear-gradient(135deg, #faf5ff 0%, #fffbeb 54%, #ffffff 100%) !important;
  border: 1px solid rgba(168, 85, 247, 0.20);
  box-shadow: 0 28px 80px rgba(88, 28, 135, 0.09);
}

.vb-countdown-nineteen-auction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(260px, 340px);
  gap: clamp(18px, 3vw, 26px);
  align-items: stretch;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 26px);
  border-radius: 10px 42px 10px 42px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.12), transparent 34%),
    linear-gradient(135deg, #1e1b4b 0%, #3b0764 50%, #111827 100%) !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
}

.vb-countdown-nineteen-item,
.vb-countdown-nineteen-activity,
.vb-countdown-nineteen-panel {
  min-width: 0;
}

.vb-countdown-nineteen-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 3vw, 28px);
}

.vb-countdown-nineteen-kicker {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px 999px 4px 999px;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(253, 224, 71, 0.22);
  color: #fde68a !important;
  -webkit-text-fill-color: #fde68a !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-nineteen-item h3 {
  max-width: 760px;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(36px, 5.8vw, 78px) !important;
  line-height: 0.9 !important;
  font-weight: 950 !important;
  letter-spacing: -0.08em;
  overflow-wrap: anywhere;
}

.vb-countdown-nineteen-item p {
  max-width: 680px;
  margin: 0 0 22px !important;
  color: #e9d5ff !important;
  -webkit-text-fill-color: #e9d5ff !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-nineteen-bid {
  display: inline-grid;
  gap: 5px;
  align-self: flex-start;
  padding: 18px 20px;
  border-radius: 24px 6px 24px 6px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
}

.vb-countdown-nineteen-bid span,
.vb-countdown-nineteen-bid small {
  color: #fde68a !important;
  -webkit-text-fill-color: #fde68a !important;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-nineteen-bid strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.vb-countdown-nineteen-activity {
  display: grid;
  gap: 12px;
  align-content: center;
}

.vb-countdown-nineteen-activity div {
  padding: 18px;
  border-radius: 8px 26px 8px 26px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.13);
}

.vb-countdown-nineteen-activity span {
  display: block;
  margin-bottom: 7px;
  color: #c4b5fd !important;
  -webkit-text-fill-color: #c4b5fd !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vb-countdown-nineteen-activity strong {
  display: block;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.vb-countdown-nineteen-panel {
  display: grid;
  align-content: center;
  gap: 16px;
  padding: clamp(20px, 3vw, 26px);
  border-radius: 36px 8px 36px 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.20);
}

.vb-countdown-nineteen-panel-title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.vb-countdown-nineteen-timer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vb-countdown-nineteen-timer div {
  min-width: 0;
  padding: 16px 8px;
  border-radius: 18px 6px 18px 6px;
  background: #f5f3ff;
  border: 1px solid rgba(168, 85, 247, 0.16);
  text-align: center;
}

.vb-countdown-nineteen-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 5px;
  color: #6d28d9 !important;
  -webkit-text-fill-color: #6d28d9 !important;
  font-size: clamp(30px, 6vw, 48px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-nineteen-timer span {
  display: block;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-nineteen-panel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed, #f59e0b);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(124, 58, 237, 0.22);
}

@media (max-width: 1050px) {
  .vb-countdown-nineteen-auction {
    grid-template-columns: 1fr 1fr;
  }

  .vb-countdown-nineteen-panel {
    grid-column: 1 / -1;
  }

  .vb-countdown-nineteen-timer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .vb-countdown-nineteen-auction {
    grid-template-columns: 1fr;
  }

  .vb-countdown-nineteen-item h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-nineteen-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-nineteen-panel a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-nineteen-timer {
    grid-template-columns: 1fr;
  }
}

This auction countdown timer is useful for bidding pages, marketplace listings, product auctions, collectible sales, event ticket auctions, NFT-style drops, and limited bidding campaigns.

20. Donation Campaign Countdown Timer

A donation campaign countdown timer is useful for nonprofit campaigns, fundraising pages, charity events, community projects, donation drives, awareness campaigns, and goal-based landing pages where supporters need to donate before a campaign deadline.

This example uses a donation-focused campaign layout with a fundraising progress bar, goal cards, donor message area, deadline countdown, and donation CTA. The JavaScript uses a repeating 30-day campaign cycle, so the timer keeps working instead of remaining expired.

Donation campaign countdown timer
Fundraising progress bar
Days, hours, minutes, and seconds
Repeating campaign cycle
Responsive nonprofit landing page section

Example 20

Donation Campaign Countdown Timer

Use this countdown timer for nonprofit fundraising pages, charity campaigns, donation drives, awareness events, community projects, and goal-based campaign pages.

€18,450 raised Goal: €25,000

428 Supporters

74% Funded

Campaign active Deadline

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-twenty]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 30;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-01T09:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextCampaignEl = timer.querySelector("[data-next-campaign]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextCampaignEnd(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateCountdown() {
    const now = Date.now();
    const nextEnd = getNextCampaignEnd(now);
    let remaining = nextEnd - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const dateText = new Date(nextEnd).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    nextCampaignEl.textContent = "Ends " + dateText;
    statusEl.textContent = "Donation window active";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-twenty-demo">
  <section class="vb-countdown-twenty-donation" data-vb-countdown-twenty data-cycle-days="30">
    <div class="vb-countdown-twenty-content">
      <span class="vb-countdown-twenty-kicker">Example 20</span>
      <h3>Donation Campaign Countdown Timer</h3>
      <p>Use this countdown timer for nonprofit fundraising pages, charity campaigns, donation drives, awareness events, community projects, and goal-based campaign pages.</p>

      <div class="vb-countdown-twenty-progress">
        <div class="vb-countdown-twenty-progress-head">
          <strong>€18,450 raised</strong>
          <span>Goal: €25,000</span>
        </div>
        <div class="vb-countdown-twenty-progress-bar">
          <i></i>
        </div>
      </div>

      <div class="vb-countdown-twenty-stats">
        <div>
          <strong>428</strong>
          <span>Supporters</span>
        </div>
        <div>
          <strong>74%</strong>
          <span>Funded</span>
        </div>
        <div>
          <strong data-next-campaign>Campaign active</strong>
          <span>Deadline</span>
        </div>
      </div>
    </div>

    <aside class="vb-countdown-twenty-panel">
      <span data-status>Donation window active</span>

      <div class="vb-countdown-twenty-timer" aria-label="Donation campaign countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <p>Every contribution helps move this campaign closer to its goal before the current deadline.</p>
      <a href="#donate-now">Donate Now</a>
    </aside>
  </section>
</div>

CSS

.vb-countdown-twenty-demo,
.vb-countdown-twenty-demo * {
  box-sizing: border-box;
}

.vb-countdown-twenty-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 40px);
  border-radius: 48px 12px 48px 12px;
  background:
    radial-gradient(circle at 14% 18%, rgba(20, 184, 166, 0.16), transparent 34%),
    radial-gradient(circle at 88% 22%, rgba(34, 197, 94, 0.14), transparent 34%),
    linear-gradient(135deg, #f0fdfa 0%, #f0fdf4 54%, #ffffff 100%) !important;
  border: 1px solid rgba(20, 184, 166, 0.20);
  box-shadow: 0 28px 80px rgba(15, 118, 110, 0.09);
}

.vb-countdown-twenty-donation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 380px);
  gap: clamp(20px, 3vw, 30px);
  align-items: stretch;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 38px 10px 38px 10px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
}

.vb-countdown-twenty-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vb-countdown-twenty-kicker {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px 999px 4px 999px;
  background: #ccfbf1;
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-twenty-content h3 {
  max-width: 780px;
  margin: 0 0 16px !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: clamp(36px, 5.8vw, 76px) !important;
  line-height: 0.9 !important;
  font-weight: 950 !important;
  letter-spacing: -0.08em;
  overflow-wrap: anywhere;
}

.vb-countdown-twenty-content p {
  max-width: 720px;
  margin: 0 0 24px !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-twenty-progress {
  max-width: 720px;
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 24px 8px 24px 8px;
  background: #f0fdfa;
  border: 1px solid rgba(20, 184, 166, 0.18);
}

.vb-countdown-twenty-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.vb-countdown-twenty-progress-head strong {
  color: #134e4a !important;
  -webkit-text-fill-color: #134e4a !important;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 950;
}

.vb-countdown-twenty-progress-head span {
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
  font-size: 13px;
  font-weight: 850;
}

.vb-countdown-twenty-progress-bar {
  overflow: hidden;
  height: 14px;
  border-radius: 999px;
  background: #ccfbf1;
}

.vb-countdown-twenty-progress-bar i {
  display: block;
  width: 74%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14b8a6, #22c55e) !important;
}

.vb-countdown-twenty-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 720px;
}

.vb-countdown-twenty-stats div {
  min-width: 0;
  padding: 16px;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.vb-countdown-twenty-stats strong {
  display: block;
  margin-bottom: 6px;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
}

.vb-countdown-twenty-stats span {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 12px;
  font-weight: 850;
}

.vb-countdown-twenty-panel {
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
  padding: clamp(20px, 3vw, 26px);
  border-radius: 8px 34px 8px 34px;
  background:
    radial-gradient(circle at 24% 16%, rgba(255,255,255,0.15), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #134e4a 56%, #064e3b 100%) !important;
  box-shadow: 0 24px 70px rgba(15, 118, 110, 0.18);
}

.vb-countdown-twenty-panel > span {
  display: inline-flex;
  justify-self: start;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.14);
  border: 1px solid rgba(94, 234, 212, 0.20);
  color: #99f6e4 !important;
  -webkit-text-fill-color: #99f6e4 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vb-countdown-twenty-timer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vb-countdown-twenty-timer div {
  min-width: 0;
  padding: 16px 8px;
  border-radius: 18px 6px 18px 6px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.13);
  text-align: center;
}

.vb-countdown-twenty-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 6px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(30px, 6vw, 48px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-twenty-timer span {
  display: block;
  color: #bbf7d0 !important;
  -webkit-text-fill-color: #bbf7d0 !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-twenty-panel p {
  margin: 0 !important;
  color: #dcfce7 !important;
  -webkit-text-fill-color: #dcfce7 !important;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 650;
}

.vb-countdown-twenty-panel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #14b8a6, #22c55e);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(20, 184, 166, 0.22);
}

@media (max-width: 920px) {
  .vb-countdown-twenty-donation {
    grid-template-columns: 1fr;
  }

  .vb-countdown-twenty-timer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .vb-countdown-twenty-content h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-twenty-progress-head {
    flex-direction: column;
  }

  .vb-countdown-twenty-stats {
    grid-template-columns: 1fr;
  }

  .vb-countdown-twenty-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-twenty-panel a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-twenty-timer {
    grid-template-columns: 1fr;
  }
}

This donation campaign countdown timer is useful for nonprofit fundraising pages, charity campaigns, donation drives, community projects, awareness events, goal-based landing pages, and campaign deadline sections.

21. Maintenance Mode Countdown Timer

A maintenance mode countdown timer is useful for websites, SaaS dashboards, web apps, hosting panels, admin areas, product platforms, and service pages that need to show when scheduled maintenance will end.

This example uses a technical maintenance layout with warning stripes, a system-status panel, uptime cards, terminal-style details, and a bold countdown display. The JavaScript uses a repeating 4-hour maintenance window, so the demo keeps working and never stays expired.

Maintenance mode countdown timer
System-status style design
Hours, minutes, and seconds
Repeating maintenance window
Responsive technical UI layout

Example 21 Scheduled maintenance active

Maintenance Mode Countdown Timer

Use this countdown timer for scheduled maintenance pages, SaaS dashboards, hosting panels, app status pages, and service update screens.

System notice Maintenance window is currently running. Services will return after the countdown ends. Automatic demo cycle enabled.

00 Hours

00 Minutes

00 Seconds

99.9% Target uptime

Live Status monitor

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-twentyone]");
  if (!timer) return;

  const duration = Number(timer.getAttribute("data-duration")) || 14400;
  let remaining = duration;

  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function updateCountdown() {
    if (remaining <= 0) {
      remaining = duration;
    }

    const hours = Math.floor(remaining / 3600);
    const minutes = Math.floor((remaining / 60) % 60);
    const seconds = remaining % 60;

    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    statusEl.textContent = "Scheduled maintenance active";

    remaining -= 1;
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-twentyone-demo">
  <section class="vb-countdown-twentyone-maintenance" data-vb-countdown-twentyone data-duration="14400">
    <div class="vb-countdown-twentyone-header">
      <span class="vb-countdown-twentyone-kicker">Example 21</span>
      <strong data-status>Scheduled maintenance active</strong>
    </div>

    <div class="vb-countdown-twentyone-main">
      <div class="vb-countdown-twentyone-copy">
        <h3>Maintenance Mode Countdown Timer</h3>
        <p>Use this countdown timer for scheduled maintenance pages, SaaS dashboards, hosting panels, app status pages, and service update screens.</p>

        <div class="vb-countdown-twentyone-terminal">
          <span>System notice</span>
          <code>Maintenance window is currently running.</code>
          <code>Services will return after the countdown ends.</code>
          <code>Automatic demo cycle enabled.</code>
        </div>
      </div>

      <div class="vb-countdown-twentyone-panel">
        <div class="vb-countdown-twentyone-timer" aria-label="Maintenance mode countdown timer">
          <div>
            <strong data-hours>00</strong>
            <span>Hours</span>
          </div>

          <div>
            <strong data-minutes>00</strong>
            <span>Minutes</span>
          </div>

          <div>
            <strong data-seconds>00</strong>
            <span>Seconds</span>
          </div>
        </div>

        <div class="vb-countdown-twentyone-metrics">
          <div>
            <strong>99.9%</strong>
            <span>Target uptime</span>
          </div>

          <div>
            <strong>Live</strong>
            <span>Status monitor</span>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

CSS

.vb-countdown-twentyone-demo,
.vb-countdown-twentyone-demo * {
  box-sizing: border-box;
}

.vb-countdown-twentyone-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 40px);
  border-radius: 10px;
  background:
    repeating-linear-gradient(135deg, rgba(250, 204, 21, 0.16) 0 12px, rgba(15, 23, 42, 0.04) 12px 24px),
    linear-gradient(135deg, #f8fafc 0%, #fefce8 52%, #ffffff 100%) !important;
  border: 1px solid rgba(234, 179, 8, 0.26);
  box-shadow: 0 28px 80px rgba(113, 63, 18, 0.10);
}

.vb-countdown-twentyone-maintenance {
  max-width: 1160px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(135deg, #020617 0%, #111827 58%, #292524 100%) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 90px rgba(2, 6, 23, 0.40);
}

.vb-countdown-twentyone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background:
    repeating-linear-gradient(135deg, #facc15 0 14px, #111827 14px 28px) !important;
}

.vb-countdown-twentyone-kicker {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 4px;
  background: #111827;
  color: #fef3c7 !important;
  -webkit-text-fill-color: #fef3c7 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-twentyone-header > strong {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background: #fef3c7;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 950;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vb-countdown-twentyone-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: clamp(22px, 4vw, 38px);
  align-items: center;
  padding: clamp(24px, 5vw, 48px);
}

.vb-countdown-twentyone-copy,
.vb-countdown-twentyone-panel {
  min-width: 0;
}

.vb-countdown-twentyone-copy h3 {
  max-width: 760px;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(36px, 6vw, 78px) !important;
  line-height: 0.88 !important;
  font-weight: 950 !important;
  letter-spacing: -0.08em;
  overflow-wrap: anywhere;
}

.vb-countdown-twentyone-copy p {
  max-width: 680px;
  margin: 0 0 24px !important;
  color: #d1d5db !important;
  -webkit-text-fill-color: #d1d5db !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-twentyone-terminal {
  display: grid;
  gap: 8px;
  max-width: 680px;
  padding: 18px;
  border-radius: 6px;
  background: #020617;
  border: 1px solid rgba(250, 204, 21, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.vb-countdown-twentyone-terminal span {
  color: #facc15 !important;
  -webkit-text-fill-color: #facc15 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-countdown-twentyone-terminal code {
  display: block;
  white-space: normal;
  color: #bbf7d0 !important;
  -webkit-text-fill-color: #bbf7d0 !important;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 750;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.vb-countdown-twentyone-terminal code::before {
  content: "> ";
  color: #facc15;
  -webkit-text-fill-color: #facc15;
}

.vb-countdown-twentyone-panel {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 3vw, 24px);
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.vb-countdown-twentyone-timer {
  display: grid;
  gap: 10px;
}

.vb-countdown-twentyone-timer div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border-radius: 4px;
  background: #facc15;
  border-left: 8px solid #111827;
}

.vb-countdown-twentyone-timer strong {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-twentyone-timer span {
  color: #292524 !important;
  -webkit-text-fill-color: #292524 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vb-countdown-twentyone-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vb-countdown-twentyone-metrics div {
  min-width: 0;
  padding: 16px;
  border-radius: 6px;
  background: #020617;
  border: 1px solid rgba(255,255,255,0.10);
}

.vb-countdown-twentyone-metrics strong {
  display: block;
  margin-bottom: 6px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.vb-countdown-twentyone-metrics span {
  color: #fef3c7 !important;
  -webkit-text-fill-color: #fef3c7 !important;
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 900px) {
  .vb-countdown-twentyone-main {
    grid-template-columns: 1fr;
  }

  .vb-countdown-twentyone-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .vb-countdown-twentyone-header > strong {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .vb-countdown-twentyone-copy h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-twentyone-timer div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .vb-countdown-twentyone-metrics {
    grid-template-columns: 1fr;
  }
}

This maintenance mode countdown timer is useful for website maintenance pages, SaaS status pages, hosting dashboards, update screens, app downtime notices, and scheduled service interruption messages.

22. App Download Launch Countdown Timer

An app download launch countdown timer is useful for mobile app landing pages, startup launches, app store campaigns, waitlist pages, beta launch pages, product preview pages, and app promotion sections.

This example uses a mobile app launch layout with a phone mockup, floating app cards, download buttons, launch badges, and a soft gradient countdown panel. The JavaScript uses a repeating 18-day launch cycle, so the timer keeps working far into the future.

App download launch countdown timer
Mobile app landing page design
Days, hours, minutes, and seconds
Phone mockup with app UI cards
Responsive app launch section

Launch Soon

Users 24k

Example 22

App Download Launch Countdown Timer

Use this countdown timer for mobile app launch pages, beta release campaigns, app store waitlists, SaaS apps, startup products, and download landing pages.

iOS and Android Early access Next launch loading

00 Days

00 Hours

00 Min

00 Sec

App launch countdown is active.

App Store Google Play

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-twentytwo]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 18;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-06T10:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextLaunchEl = timer.querySelector("[data-next-launch]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextLaunch(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateCountdown() {
    const now = Date.now();
    const nextLaunch = getNextLaunch(now);
    let remaining = nextLaunch - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const dateText = new Date(nextLaunch).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    nextLaunchEl.textContent = "Launch window: " + dateText;
    statusEl.textContent = "App launch countdown is active.";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-twentytwo-demo">
  <section class="vb-countdown-twentytwo-app" data-vb-countdown-twentytwo data-cycle-days="18">
    <div class="vb-countdown-twentytwo-phone-wrap">
      <div class="vb-countdown-twentytwo-phone">
        <div class="vb-countdown-twentytwo-notch"></div>
        <div class="vb-countdown-twentytwo-appicon">A</div>
        <div class="vb-countdown-twentytwo-card vb-countdown-twentytwo-card-one">
          <span>Launch</span>
          <strong>Soon</strong>
        </div>
        <div class="vb-countdown-twentytwo-card vb-countdown-twentytwo-card-two">
          <span>Users</span>
          <strong>24k</strong>
        </div>
        <div class="vb-countdown-twentytwo-bars">
          <i></i>
          <i></i>
          <i></i>
        </div>
      </div>
    </div>

    <div class="vb-countdown-twentytwo-content">
      <span class="vb-countdown-twentytwo-kicker">Example 22</span>
      <h3>App Download Launch Countdown Timer</h3>
      <p>Use this countdown timer for mobile app launch pages, beta release campaigns, app store waitlists, SaaS apps, startup products, and download landing pages.</p>

      <div class="vb-countdown-twentytwo-badges">
        <span>iOS and Android</span>
        <span>Early access</span>
        <span data-next-launch>Next launch loading</span>
      </div>

      <div class="vb-countdown-twentytwo-timer" aria-label="App download launch countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <p class="vb-countdown-twentytwo-status" data-status>App launch countdown is active.</p>

      <div class="vb-countdown-twentytwo-buttons">
        <a href="#app-store">App Store</a>
        <a href="#google-play">Google Play</a>
      </div>
    </div>
  </section>
</div>

CSS

.vb-countdown-twentytwo-demo,
.vb-countdown-twentytwo-demo * {
  box-sizing: border-box;
}

.vb-countdown-twentytwo-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 42px);
  border-radius: 60px 60px 18px 18px;
  background:
    radial-gradient(circle at 18% 20%, rgba(236, 72, 153, 0.18), transparent 34%),
    radial-gradient(circle at 84% 20%, rgba(59, 130, 246, 0.18), transparent 34%),
    linear-gradient(135deg, #fdf2f8 0%, #eff6ff 54%, #ffffff 100%) !important;
  border: 1px solid rgba(236, 72, 153, 0.18);
  box-shadow: 0 28px 80px rgba(157, 23, 77, 0.09);
}

.vb-countdown-twentytwo-app {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 5vw, 46px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px);
  overflow: hidden;
  border-radius: 46px 46px 14px 14px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.22), transparent 34%),
    linear-gradient(135deg, #831843 0%, #4f46e5 52%, #0f172a 100%) !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.26);
}

.vb-countdown-twentytwo-app::before {
  content: "";
  position: absolute;
  right: -130px;
  top: -110px;
  width: 360px;
  height: 360px;
  border-radius: 44% 56% 64% 36%;
  background: rgba(147, 197, 253, 0.16);
}

.vb-countdown-twentytwo-app::after {
  content: "";
  position: absolute;
  left: 32%;
  bottom: -140px;
  width: 300px;
  height: 300px;
  border-radius: 70% 30% 48% 52%;
  background: rgba(244, 114, 182, 0.14);
}

.vb-countdown-twentytwo-phone-wrap,
.vb-countdown-twentytwo-content {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.vb-countdown-twentytwo-phone-wrap {
  display: grid;
  place-items: center;
}

.vb-countdown-twentytwo-phone {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 0.56 / 1;
  border-radius: 38px;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,0.18), transparent 28%),
    linear-gradient(160deg, #020617 0%, #111827 48%, #312e81 100%) !important;
  border: 10px solid rgba(255,255,255,0.18);
  box-shadow:
    0 34px 90px rgba(2, 6, 23, 0.40),
    inset 0 1px 0 rgba(255,255,255,0.10);
  transform: rotate(-4deg);
}

.vb-countdown-twentytwo-notch {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 96px;
  height: 24px;
  border-radius: 999px;
  background: #020617;
  transform: translateX(-50%);
}

.vb-countdown-twentytwo-appicon {
  position: absolute;
  left: 50%;
  top: 70px;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 24px;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ec4899, #3b82f6);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 42px;
  font-weight: 950;
  box-shadow: 0 20px 44px rgba(236, 72, 153, 0.26);
}

.vb-countdown-twentytwo-card {
  position: absolute;
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.11);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
}

.vb-countdown-twentytwo-card-one {
  left: 22px;
  right: 22px;
  top: 180px;
}

.vb-countdown-twentytwo-card-two {
  left: 22px;
  right: 22px;
  bottom: 88px;
}

.vb-countdown-twentytwo-card span {
  color: #c7d2fe !important;
  -webkit-text-fill-color: #c7d2fe !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vb-countdown-twentytwo-card strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.vb-countdown-twentytwo-bars {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 32px;
  display: grid;
  gap: 8px;
}

.vb-countdown-twentytwo-bars i {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
}

.vb-countdown-twentytwo-bars i:nth-child(1) {
  width: 86%;
}

.vb-countdown-twentytwo-bars i:nth-child(2) {
  width: 68%;
}

.vb-countdown-twentytwo-bars i:nth-child(3) {
  width: 48%;
}

.vb-countdown-twentytwo-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fbcfe8 !important;
  -webkit-text-fill-color: #fbcfe8 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-twentytwo-content h3 {
  max-width: 820px;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(36px, 6vw, 82px) !important;
  line-height: 0.88 !important;
  font-weight: 950 !important;
  letter-spacing: -0.085em;
  overflow-wrap: anywhere;
}

.vb-countdown-twentytwo-content p {
  max-width: 690px;
  margin: 0 0 22px !important;
  color: #e0e7ff !important;
  -webkit-text-fill-color: #e0e7ff !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-twentytwo-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.vb-countdown-twentytwo-badges span {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fce7f3 !important;
  -webkit-text-fill-color: #fce7f3 !important;
  font-size: 12px;
  font-weight: 850;
}

.vb-countdown-twentytwo-timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 12px);
  max-width: 720px;
  margin-bottom: 18px;
}

.vb-countdown-twentytwo-timer div {
  min-width: 0;
  padding: clamp(15px, 2.5vw, 22px) 8px;
  border-radius: 999px 999px 22px 22px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  text-align: center;
}

.vb-countdown-twentytwo-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 7px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-twentytwo-timer span {
  display: block;
  color: #fbcfe8 !important;
  -webkit-text-fill-color: #fbcfe8 !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-twentytwo-status {
  margin-bottom: 18px !important;
}

.vb-countdown-twentytwo-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.vb-countdown-twentytwo-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 20px;
  border-radius: 18px;
  background: #ffffff;
  color: #4f46e5 !important;
  -webkit-text-fill-color: #4f46e5 !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
}

.vb-countdown-twentytwo-buttons a:nth-child(2) {
  background: rgba(255,255,255,0.12);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.16);
}

@media (max-width: 920px) {
  .vb-countdown-twentytwo-app {
    grid-template-columns: 1fr;
  }

  .vb-countdown-twentytwo-phone {
    max-width: 260px;
  }
}

@media (max-width: 640px) {
  .vb-countdown-twentytwo-demo {
    border-radius: 38px 38px 12px 12px;
  }

  .vb-countdown-twentytwo-app {
    border-radius: 30px 30px 10px 10px;
  }

  .vb-countdown-twentytwo-content h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-twentytwo-phone {
    transform: none;
  }

  .vb-countdown-twentytwo-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-twentytwo-timer strong {
    font-size: clamp(30px, 13vw, 46px);
  }

  .vb-countdown-twentytwo-buttons a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-twentytwo-timer {
    grid-template-columns: 1fr;
  }
}

This app download launch countdown timer is useful for mobile app landing pages, app store waitlists, startup product launches, beta access campaigns, SaaS app releases, and download promotion sections.

23. Preorder Countdown Timer

A preorder countdown timer is useful for product launch pages, ecommerce preorder campaigns, limited production runs, hardware launches, digital product releases, book launches, and early buyer landing pages. It shows visitors how much time remains before preorder pricing or availability changes.

This example uses a premium preorder layout with a product showcase panel, launch badge, price card, preorder benefits, and a large countdown display. The JavaScript uses a repeating 21-day preorder cycle, so the timer keeps working in the future and never stays stopped at zero.

Preorder countdown timer
Product launch preorder layout
Days, hours, minutes, and seconds
Repeating preorder cycle
Responsive ecommerce launch section

Example 23

Preorder price €149

Preorder Campaign

Preorder Countdown Timer

Use this countdown timer for product preorder pages, ecommerce launch campaigns, limited production drops, digital releases, and early buyer offers.

Early price Preorder discount active

Limited batch First release quantity

Next preorder window loading Campaign deadline

00 Days

00 Hours

00 Min

00 Sec

Preorder window is active.

Preorder Now

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-twentythree]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 21;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-05T13:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextPreorderEl = timer.querySelector("[data-next-preorder]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextPreorderEnd(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateCountdown() {
    const now = Date.now();
    const nextEnd = getNextPreorderEnd(now);
    let remaining = nextEnd - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const dateText = new Date(nextEnd).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    nextPreorderEl.textContent = "Ends " + dateText;
    statusEl.textContent = "Preorder window is active.";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-twentythree-demo">
  <section class="vb-countdown-twentythree-preorder" data-vb-countdown-twentythree data-cycle-days="21">
    <div class="vb-countdown-twentythree-product">
      <span class="vb-countdown-twentythree-tag">Example 23</span>

      <div class="vb-countdown-twentythree-product-card">
        <div class="vb-countdown-twentythree-product-top">
          <i></i>
          <i></i>
        </div>

        <div class="vb-countdown-twentythree-product-shape">
          <span></span>
        </div>

        <div class="vb-countdown-twentythree-price">
          <small>Preorder price</small>
          <strong>€149</strong>
        </div>
      </div>
    </div>

    <div class="vb-countdown-twentythree-content">
      <span class="vb-countdown-twentythree-kicker">Preorder Campaign</span>
      <h3>Preorder Countdown Timer</h3>
      <p>Use this countdown timer for product preorder pages, ecommerce launch campaigns, limited production drops, digital releases, and early buyer offers.</p>

      <div class="vb-countdown-twentythree-benefits">
        <div>
          <strong>Early price</strong>
          <span>Preorder discount active</span>
        </div>

        <div>
          <strong>Limited batch</strong>
          <span>First release quantity</span>
        </div>

        <div>
          <strong data-next-preorder>Next preorder window loading</strong>
          <span>Campaign deadline</span>
        </div>
      </div>

      <div class="vb-countdown-twentythree-timer" aria-label="Preorder countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <p class="vb-countdown-twentythree-status" data-status>Preorder window is active.</p>

      <a href="#preorder-now">Preorder Now</a>
    </div>
  </section>
</div>

CSS

.vb-countdown-twentythree-demo,
.vb-countdown-twentythree-demo * {
  box-sizing: border-box;
}

.vb-countdown-twentythree-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 42px);
  border-radius: 18px 18px 62px 18px;
  background:
    radial-gradient(circle at 14% 18%, rgba(251, 146, 60, 0.18), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(99, 102, 241, 0.16), transparent 34%),
    linear-gradient(135deg, #fff7ed 0%, #eef2ff 54%, #ffffff 100%) !important;
  border: 1px solid rgba(251, 146, 60, 0.22);
  box-shadow: 0 28px 80px rgba(124, 45, 18, 0.09);
}

.vb-countdown-twentythree-preorder {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 5vw, 46px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px);
  overflow: hidden;
  border-radius: 12px 12px 48px 12px;
  background:
    radial-gradient(circle at 22% 22%, rgba(255,255,255,0.20), transparent 34%),
    linear-gradient(135deg, #431407 0%, #9a3412 48%, #312e81 100%) !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
}

.vb-countdown-twentythree-preorder::before {
  content: "";
  position: absolute;
  left: -130px;
  bottom: -140px;
  width: 360px;
  height: 360px;
  border-radius: 35% 65% 52% 48%;
  background: rgba(251, 146, 60, 0.16);
}

.vb-countdown-twentythree-preorder::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 320px;
  height: 320px;
  border-radius: 68% 32% 42% 58%;
  background: rgba(129, 140, 248, 0.14);
}

.vb-countdown-twentythree-product,
.vb-countdown-twentythree-content {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.vb-countdown-twentythree-product {
  display: grid;
  place-items: center;
}

.vb-countdown-twentythree-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 4;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px 999px 999px 4px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fed7aa !important;
  -webkit-text-fill-color: #fed7aa !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-twentythree-product-card {
  position: relative;
  width: min(100%, 340px);
  min-height: 430px;
  border-radius: 22px 54px 22px 54px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,0.20), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)) !important;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 34px 90px rgba(2, 6, 23, 0.32);
  backdrop-filter: blur(14px);
  transform: rotate(3deg);
}

.vb-countdown-twentythree-product-top {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 28px;
  display: flex;
  justify-content: space-between;
}

.vb-countdown-twentythree-product-top i {
  display: block;
  width: 54px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}

.vb-countdown-twentythree-product-top i:nth-child(2) {
  width: 34px;
}

.vb-countdown-twentythree-product-shape {
  position: absolute;
  left: 50%;
  top: 48%;
  display: grid;
  place-items: center;
  width: 190px;
  height: 230px;
  border-radius: 42px 18px 42px 18px;
  transform: translate(-50%, -50%) rotate(-9deg);
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,0.34), transparent 32%),
    linear-gradient(135deg, #fb923c, #6366f1) !important;
  box-shadow: 0 30px 70px rgba(2, 6, 23, 0.24);
}

.vb-countdown-twentythree-product-shape span {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.24);
}

.vb-countdown-twentythree-price {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: grid;
  gap: 7px;
  padding: 18px;
  border-radius: 20px 8px 20px 8px;
  background: rgba(2, 6, 23, 0.66);
  border: 1px solid rgba(255,255,255,0.12);
}

.vb-countdown-twentythree-price small {
  color: #fed7aa !important;
  -webkit-text-fill-color: #fed7aa !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vb-countdown-twentythree-price strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 42px;
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.vb-countdown-twentythree-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 6px 999px 999px 6px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fed7aa !important;
  -webkit-text-fill-color: #fed7aa !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-twentythree-content h3 {
  max-width: 820px;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(36px, 6vw, 82px) !important;
  line-height: 0.88 !important;
  font-weight: 950 !important;
  letter-spacing: -0.085em;
  overflow-wrap: anywhere;
}

.vb-countdown-twentythree-content p {
  max-width: 690px;
  margin: 0 0 22px !important;
  color: #ffedd5 !important;
  -webkit-text-fill-color: #ffedd5 !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-twentythree-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 760px;
  margin-bottom: 18px;
}

.vb-countdown-twentythree-benefits div {
  min-width: 0;
  padding: 15px;
  border-radius: 18px 6px 18px 6px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.13);
}

.vb-countdown-twentythree-benefits strong {
  display: block;
  margin-bottom: 6px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.vb-countdown-twentythree-benefits span {
  color: #c7d2fe !important;
  -webkit-text-fill-color: #c7d2fe !important;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 750;
}

.vb-countdown-twentythree-timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 12px);
  max-width: 760px;
  margin-bottom: 18px;
}

.vb-countdown-twentythree-timer div {
  min-width: 0;
  padding: clamp(15px, 2.5vw, 22px) 8px;
  border-radius: 8px 26px 8px 26px;
  background: #ffffff;
  text-align: center;
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.18);
}

.vb-countdown-twentythree-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 7px;
  color: #9a3412 !important;
  -webkit-text-fill-color: #9a3412 !important;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-twentythree-timer span {
  display: block;
  color: #4f46e5 !important;
  -webkit-text-fill-color: #4f46e5 !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-twentythree-status {
  margin-bottom: 18px !important;
}

.vb-countdown-twentythree-content a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 20px;
  border-radius: 999px 8px 999px 8px;
  background: linear-gradient(135deg, #fb923c, #6366f1);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(251, 146, 60, 0.22);
}

@media (max-width: 920px) {
  .vb-countdown-twentythree-preorder {
    grid-template-columns: 1fr;
  }

  .vb-countdown-twentythree-product-card {
    transform: none;
  }
}

@media (max-width: 640px) {
  .vb-countdown-twentythree-demo {
    border-radius: 12px 12px 38px 12px;
  }

  .vb-countdown-twentythree-preorder {
    border-radius: 10px 10px 30px 10px;
  }

  .vb-countdown-twentythree-content h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-twentythree-benefits {
    grid-template-columns: 1fr;
  }

  .vb-countdown-twentythree-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-twentythree-timer strong {
    font-size: clamp(30px, 13vw, 46px);
  }

  .vb-countdown-twentythree-content a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-twentythree-timer {
    grid-template-columns: 1fr;
  }
}

This preorder countdown timer is useful for ecommerce preorder campaigns, product launch pages, hardware releases, book launches, limited production runs, digital product releases, and early buyer landing pages.

24. Newsletter Offer Countdown Timer

A newsletter offer countdown timer is useful for email signup sections, lead magnet pages, newsletter popups, content upgrade blocks, creator landing pages, marketing funnels, and limited-time subscriber offers.

This example uses an editorial newsletter layout with a paper-style signup card, stamp badge, email input, subscriber benefit list, and compact countdown strip. The JavaScript uses a repeating 36-hour signup offer window, so the demo keeps running and never stays expired.

Newsletter offer countdown timer
Email signup and lead magnet layout
Hours, minutes, and seconds
Repeating signup offer window
Responsive newsletter CTA design

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-twentyfour]");
  if (!timer) return;

  const duration = Number(timer.getAttribute("data-duration")) || 129600;
  let remaining = duration;

  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function updateCountdown() {
    if (remaining <= 0) {
      remaining = duration;
    }

    const hours = Math.floor(remaining / 3600);
    const minutes = Math.floor((remaining / 60) % 60);
    const seconds = remaining % 60;

    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    statusEl.textContent = "Signup offer is active.";

    remaining -= 1;
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-twentyfour-demo">
  <section class="vb-countdown-twentyfour-newsletter" data-vb-countdown-twentyfour data-duration="129600">
    <div class="vb-countdown-twentyfour-paper">
      <div class="vb-countdown-twentyfour-stamp">Example 24</div>

      <div class="vb-countdown-twentyfour-paper-head">
        <span>Weekly Web Design Notes</span>
        <strong>Newsletter Offer Countdown Timer</strong>
      </div>

      <p>Use this timer for newsletter signup offers, lead magnets, content upgrades, free download campaigns, and email marketing landing pages.</p>

      <form class="vb-countdown-twentyfour-form">
        <input type="email" placeholder="Enter your email" aria-label="Email address">
        <button type="button">Subscribe</button>
      </form>

      <div class="vb-countdown-twentyfour-list">
        <span>Free resource included</span>
        <span>No spam</span>
        <span>Weekly tips</span>
      </div>
    </div>

    <aside class="vb-countdown-twentyfour-side">
      <span class="vb-countdown-twentyfour-kicker">Subscriber bonus</span>
      <h3>Newsletter Offer Countdown Timer</h3>
      <p data-status>Signup offer is active.</p>

      <div class="vb-countdown-twentyfour-timer" aria-label="Newsletter offer countdown timer">
        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <small>Offer automatically refreshes for demo use.</small>
    </aside>
  </section>
</div>

CSS

.vb-countdown-twentyfour-demo,
.vb-countdown-twentyfour-demo * {
  box-sizing: border-box;
}

.vb-countdown-twentyfour-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 42px);
  border-radius: 14px 48px 14px 48px;
  background:
    radial-gradient(circle at 16% 18%, rgba(15, 23, 42, 0.08), transparent 34%),
    radial-gradient(circle at 84% 22%, rgba(20, 184, 166, 0.14), transparent 34%),
    linear-gradient(135deg, #f8fafc 0%, #ecfeff 52%, #ffffff 100%) !important;
  border: 1px solid rgba(20, 184, 166, 0.20);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.08);
}

.vb-countdown-twentyfour-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(22px, 4vw, 34px);
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
}

.vb-countdown-twentyfour-paper {
  position: relative;
  min-width: 0;
  padding: clamp(28px, 5vw, 54px);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(#ffffff, #fffaf0) !important;
  background-size: 28px 28px, auto !important;
  border: 1px solid rgba(120, 113, 108, 0.24);
  box-shadow:
    0 28px 80px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

.vb-countdown-twentyfour-paper::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: repeating-linear-gradient(to bottom, #14b8a6 0 14px, transparent 14px 24px);
  opacity: 0.7;
}

.vb-countdown-twentyfour-stamp {
  position: absolute;
  right: clamp(18px, 3vw, 30px);
  top: clamp(18px, 3vw, 30px);
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  border: 2px dashed rgba(20, 184, 166, 0.70);
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  transform: rotate(9deg);
}

.vb-countdown-twentyfour-paper-head {
  display: grid;
  gap: 12px;
  max-width: 720px;
  padding-right: 110px;
  margin-bottom: 18px;
}

.vb-countdown-twentyfour-paper-head span {
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.vb-countdown-twentyfour-paper-head strong {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: clamp(34px, 5.8vw, 74px);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: -0.08em;
  overflow-wrap: anywhere;
}

.vb-countdown-twentyfour-paper p {
  max-width: 690px;
  margin: 0 0 24px !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-twentyfour-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 10px;
  max-width: 620px;
  margin-bottom: 18px;
}

.vb-countdown-twentyfour-form input {
  min-width: 0;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 6px;
  border: 1px solid rgba(100, 116, 139, 0.24);
  background: #ffffff;
  outline: none;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 14px;
  font-weight: 750;
}

.vb-countdown-twentyfour-form button {
  min-height: 54px;
  border: 0;
  border-radius: 6px;
  background: #0f172a;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
}

.vb-countdown-twentyfour-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vb-countdown-twentyfour-list span {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 6px;
  background: #ecfeff;
  color: #0f766e !important;
  -webkit-text-fill-color: #0f766e !important;
  font-size: 12px;
  font-weight: 850;
}

.vb-countdown-twentyfour-side {
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 36px 8px 36px 8px;
  background:
    radial-gradient(circle at 22% 16%, rgba(255,255,255,0.16), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #164e63 58%, #134e4a 100%) !important;
  box-shadow: 0 26px 76px rgba(15, 23, 42, 0.18);
}

.vb-countdown-twentyfour-kicker {
  display: inline-flex;
  justify-self: start;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.14);
  border: 1px solid rgba(94, 234, 212, 0.20);
  color: #99f6e4 !important;
  -webkit-text-fill-color: #99f6e4 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.vb-countdown-twentyfour-side h3 {
  margin: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  line-height: 0.95 !important;
  font-weight: 950 !important;
  letter-spacing: -0.065em;
  overflow-wrap: anywhere;
}

.vb-countdown-twentyfour-side p {
  margin: 0 !important;
  color: #ccfbf1 !important;
  -webkit-text-fill-color: #ccfbf1 !important;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
}

.vb-countdown-twentyfour-timer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.vb-countdown-twentyfour-timer div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 15px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.13);
}

.vb-countdown-twentyfour-timer strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(30px, 6vw, 46px);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.vb-countdown-twentyfour-timer span {
  color: #a7f3d0 !important;
  -webkit-text-fill-color: #a7f3d0 !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-twentyfour-side small {
  color: #d1fae5 !important;
  -webkit-text-fill-color: #d1fae5 !important;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 750;
}

@media (max-width: 900px) {
  .vb-countdown-twentyfour-newsletter {
    grid-template-columns: 1fr;
  }

  .vb-countdown-twentyfour-timer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vb-countdown-twentyfour-timer div {
    display: grid;
    place-items: center;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .vb-countdown-twentyfour-demo {
    border-radius: 12px 34px 12px 34px;
  }

  .vb-countdown-twentyfour-stamp {
    position: static;
    width: auto;
    height: auto;
    justify-self: start;
    margin-bottom: 16px;
    padding: 10px 12px;
    transform: none;
  }

  .vb-countdown-twentyfour-paper-head {
    padding-right: 0;
  }

  .vb-countdown-twentyfour-paper-head strong {
    font-size: 38px;
    letter-spacing: -0.06em;
  }

  .vb-countdown-twentyfour-form {
    grid-template-columns: 1fr;
  }

  .vb-countdown-twentyfour-timer {
    grid-template-columns: 1fr;
  }
}

This newsletter offer countdown timer is useful for email signup sections, lead magnet pages, creator newsletters, popup offers, content upgrade blocks, subscriber campaigns, and marketing funnel landing pages.

25. Dashboard Task Deadline Countdown Timer

A dashboard task deadline countdown timer is useful for admin dashboards, project management apps, SaaS panels, task boards, client portals, productivity tools, and internal systems where users need to complete an action before a deadline.

This example uses a dashboard-style layout with task cards, priority labels, progress indicators, a deadline panel, and a compact countdown module. The JavaScript uses a repeating 5-day task deadline cycle, so the demo keeps working over time and never remains expired.

Dashboard task deadline countdown timer
Project management dashboard layout
Days, hours, minutes, and seconds
Task cards and progress indicators
Responsive SaaS dashboard section

Example 25

Dashboard Task Deadline Countdown Timer

Use this countdown timer for task dashboards, SaaS panels, project boards, client portals, admin screens, and productivity apps.

High Priority Landing page review Design approval needed

In Progress Campaign assets Final files pending

Deadline loading Task deadline Deadline countdown active

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-twentyfive]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 5;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-09T15:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextTaskEl = timer.querySelector("[data-next-task]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextTaskDeadline(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateCountdown() {
    const now = Date.now();
    const nextDeadline = getNextTaskDeadline(now);
    let remaining = nextDeadline - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const dateText = new Date(nextDeadline).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    nextTaskEl.textContent = "Due " + dateText;
    statusEl.textContent = "Deadline countdown active";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-twentyfive-demo">
  <section class="vb-countdown-twentyfive-dashboard" data-vb-countdown-twentyfive data-cycle-days="5">
    <div class="vb-countdown-twentyfive-sidebar">
      <span class="vb-countdown-twentyfive-logo">D</span>

      <div class="vb-countdown-twentyfive-nav">
        <i></i>
        <i></i>
        <i></i>
      </div>
    </div>

    <div class="vb-countdown-twentyfive-main">
      <div class="vb-countdown-twentyfive-title">
        <span>Example 25</span>
        <h3>Dashboard Task Deadline Countdown Timer</h3>
        <p>Use this countdown timer for task dashboards, SaaS panels, project boards, client portals, admin screens, and productivity apps.</p>
      </div>

      <div class="vb-countdown-twentyfive-tasks">
        <div>
          <span>High Priority</span>
          <strong>Landing page review</strong>
          <small>Design approval needed</small>
        </div>

        <div>
          <span>In Progress</span>
          <strong>Campaign assets</strong>
          <small>Final files pending</small>
        </div>

        <div>
          <span data-next-task>Deadline loading</span>
          <strong>Task deadline</strong>
          <small data-status>Deadline countdown active</small>
        </div>
      </div>
    </div>

    <aside class="vb-countdown-twentyfive-panel">
      <span>Deadline Timer</span>

      <div class="vb-countdown-twentyfive-timer" aria-label="Dashboard task deadline countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <div class="vb-countdown-twentyfive-progress">
        <strong>Task progress</strong>
        <div><i></i></div>
      </div>

      <a href="#dashboard-task">Open Task</a>
    </aside>
  </section>
</div>

CSS

.vb-countdown-twentyfive-demo,
.vb-countdown-twentyfive-demo * {
  box-sizing: border-box;
}

.vb-countdown-twentyfive-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 40px);
  border-radius: 26px 8px 26px 8px;
  background:
    radial-gradient(circle at 14% 18%, rgba(99, 102, 241, 0.14), transparent 34%),
    radial-gradient(circle at 88% 24%, rgba(14, 165, 233, 0.14), transparent 34%),
    linear-gradient(135deg, #f8fafc 0%, #eef2ff 52%, #ffffff 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.18);
  box-shadow: 0 28px 80px rgba(49, 46, 129, 0.09);
}

.vb-countdown-twentyfive-dashboard {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) minmax(270px, 350px);
  gap: clamp(16px, 3vw, 24px);
  align-items: stretch;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(14px, 2vw, 18px);
  border-radius: 22px 6px 22px 6px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
}

.vb-countdown-twentyfive-sidebar {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 22px;
  padding: 16px 10px;
  border-radius: 16px 4px 16px 4px;
  background: #0f172a;
}

.vb-countdown-twentyfive-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px 4px 14px 4px;
  background: linear-gradient(135deg, #6366f1, #0ea5e9);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 20px;
  font-weight: 950;
}

.vb-countdown-twentyfive-nav {
  display: grid;
  gap: 12px;
}

.vb-countdown-twentyfive-nav i {
  display: block;
  width: 34px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}

.vb-countdown-twentyfive-nav i:nth-child(2) {
  background: rgba(96, 165, 250, 0.42);
}

.vb-countdown-twentyfive-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 20px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 18px 6px 18px 6px;
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
    #f8fafc !important;
  background-size: 28px 28px, 28px 28px, auto !important;
}

.vb-countdown-twentyfive-title span {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #eef2ff;
  color: #4f46e5 !important;
  -webkit-text-fill-color: #4f46e5 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-twentyfive-title h3 {
  max-width: 780px;
  margin: 0 0 14px !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: clamp(34px, 5.6vw, 72px) !important;
  line-height: 0.9 !important;
  font-weight: 950 !important;
  letter-spacing: -0.08em;
  overflow-wrap: anywhere;
}

.vb-countdown-twentyfive-title p {
  max-width: 720px;
  margin: 0 !important;
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.72;
  font-weight: 650;
}

.vb-countdown-twentyfive-tasks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.vb-countdown-twentyfive-tasks div {
  min-width: 0;
  padding: 16px;
  border-radius: 18px 6px 18px 6px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.20);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.vb-countdown-twentyfive-tasks span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.vb-countdown-twentyfive-tasks div:nth-child(1) span {
  background: #fee2e2;
  color: #b91c1c !important;
  -webkit-text-fill-color: #b91c1c !important;
}

.vb-countdown-twentyfive-tasks div:nth-child(2) span {
  background: #fef3c7;
  color: #92400e !important;
  -webkit-text-fill-color: #92400e !important;
}

.vb-countdown-twentyfive-tasks strong {
  display: block;
  margin-bottom: 6px;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -0.045em;
}

.vb-countdown-twentyfive-tasks small {
  color: #64748b !important;
  -webkit-text-fill-color: #64748b !important;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 750;
}

.vb-countdown-twentyfive-panel {
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
  padding: clamp(20px, 3vw, 26px);
  border-radius: 6px 22px 6px 22px;
  background:
    radial-gradient(circle at 24% 16%, rgba(255,255,255,0.16), transparent 34%),
    linear-gradient(135deg, #1e1b4b 0%, #3730a3 58%, #0f172a 100%) !important;
}

.vb-countdown-twentyfive-panel > span {
  display: inline-flex;
  justify-self: start;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: #c7d2fe !important;
  -webkit-text-fill-color: #c7d2fe !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.vb-countdown-twentyfive-timer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.vb-countdown-twentyfive-timer div {
  min-width: 0;
  padding: 16px 8px;
  border-radius: 16px 4px 16px 4px;
  background: rgba(255,255,255,0.11);
  border: 1px solid rgba(255,255,255,0.13);
  text-align: center;
}

.vb-countdown-twentyfive-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 6px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(30px, 6vw, 48px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-twentyfive-timer span {
  display: block;
  color: #bfdbfe !important;
  -webkit-text-fill-color: #bfdbfe !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-twentyfive-progress {
  display: grid;
  gap: 9px;
}

.vb-countdown-twentyfive-progress strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px;
  font-weight: 900;
}

.vb-countdown-twentyfive-progress div {
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

.vb-countdown-twentyfive-progress i {
  display: block;
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #a78bfa) !important;
}

.vb-countdown-twentyfive-panel a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: #3730a3 !important;
  -webkit-text-fill-color: #3730a3 !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.20);
}

@media (max-width: 1050px) {
  .vb-countdown-twentyfive-dashboard {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .vb-countdown-twentyfive-panel {
    grid-column: 1 / -1;
  }

  .vb-countdown-twentyfive-timer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .vb-countdown-twentyfive-dashboard {
    grid-template-columns: 1fr;
  }

  .vb-countdown-twentyfive-sidebar {
    display: none;
  }

  .vb-countdown-twentyfive-title h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-twentyfive-tasks {
    grid-template-columns: 1fr;
  }

  .vb-countdown-twentyfive-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-twentyfive-panel a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-twentyfive-timer {
    grid-template-columns: 1fr;
  }
}

This dashboard task deadline countdown timer is useful for SaaS dashboards, project management apps, task boards, admin panels, client portals, productivity apps, and deadline-focused workflow sections.

26. Fitness Challenge Countdown Timer

A fitness challenge countdown timer is useful for gym websites, fitness apps, workout programs, online coaching pages, challenge landing pages, health campaigns, and membership promotions where visitors need to join before the challenge starts.

This example uses an energetic fitness campaign design with angled panels, workout stat cards, a challenge badge, bold countdown tiles, and a high-contrast CTA. The JavaScript uses a repeating 30-day fitness challenge cycle, so the demo keeps working and never remains expired.

Fitness challenge countdown timer
Workout campaign landing page design
Days, hours, minutes, and seconds
Fitness stats and challenge CTA
Responsive health and gym layout

Example 26

30 Day Challenge

HIIT Training plan

4x Weekly workouts

Fitness Challenge

Fitness Challenge Countdown Timer

Use this countdown timer for fitness challenge pages, gym promotions, workout apps, coaching launches, health campaigns, and online training programs.

00 Days

00 Hours

00 Min

00 Sec

Next challenge loading Challenge countdown active

Join Challenge

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-twentysix]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 30;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-10T07:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextChallengeEl = timer.querySelector("[data-next-challenge]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextChallengeStart(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function updateCountdown() {
    const now = Date.now();
    const nextStart = getNextChallengeStart(now);
    let remaining = nextStart - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const dateText = new Date(nextStart).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    nextChallengeEl.textContent = "Starts " + dateText;
    statusEl.textContent = "Challenge countdown active";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-twentysix-demo">
  <section class="vb-countdown-twentysix-fitness" data-vb-countdown-twentysix data-cycle-days="30">
    <div class="vb-countdown-twentysix-visual">
      <span class="vb-countdown-twentysix-tag">Example 26</span>

      <div class="vb-countdown-twentysix-pulse">
        <i></i>
        <strong>30</strong>
        <span>Day Challenge</span>
      </div>

      <div class="vb-countdown-twentysix-stat vb-countdown-twentysix-stat-one">
        <strong>HIIT</strong>
        <span>Training plan</span>
      </div>

      <div class="vb-countdown-twentysix-stat vb-countdown-twentysix-stat-two">
        <strong>4x</strong>
        <span>Weekly workouts</span>
      </div>
    </div>

    <div class="vb-countdown-twentysix-content">
      <span class="vb-countdown-twentysix-kicker">Fitness Challenge</span>
      <h3>Fitness Challenge Countdown Timer</h3>
      <p>Use this countdown timer for fitness challenge pages, gym promotions, workout apps, coaching launches, health campaigns, and online training programs.</p>

      <div class="vb-countdown-twentysix-timer" aria-label="Fitness challenge countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <div class="vb-countdown-twentysix-info">
        <span data-next-challenge>Next challenge loading</span>
        <strong data-status>Challenge countdown active</strong>
      </div>

      <a href="#join-fitness-challenge">Join Challenge</a>
    </div>
  </section>
</div>

CSS

.vb-countdown-twentysix-demo,
.vb-countdown-twentysix-demo * {
  box-sizing: border-box;
}

.vb-countdown-twentysix-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 42px);
  border-radius: 8px 70px 8px 70px;
  background:
    radial-gradient(circle at 16% 18%, rgba(239, 68, 68, 0.16), transparent 34%),
    radial-gradient(circle at 88% 22%, rgba(34, 197, 94, 0.16), transparent 34%),
    linear-gradient(135deg, #fff1f2 0%, #f0fdf4 54%, #ffffff 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.18);
  box-shadow: 0 28px 80px rgba(127, 29, 29, 0.09);
}

.vb-countdown-twentysix-fitness {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 46px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px);
  overflow: hidden;
  border-radius: 6px 54px 6px 54px;
  background:
    repeating-linear-gradient(-12deg, rgba(255,255,255,0.035) 0 10px, transparent 10px 22px),
    linear-gradient(135deg, #111827 0%, #7f1d1d 48%, #14532d 100%) !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.30);
}

.vb-countdown-twentysix-fitness::before {
  content: "";
  position: absolute;
  left: -120px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.15);
}

.vb-countdown-twentysix-fitness::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -140px;
  width: 380px;
  height: 380px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
}

.vb-countdown-twentysix-visual,
.vb-countdown-twentysix-content {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.vb-countdown-twentysix-visual {
  min-height: clamp(340px, 43vw, 500px);
  border-radius: 6px 44px 6px 44px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)) !important;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.24);
  overflow: hidden;
}

.vb-countdown-twentysix-tag {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 3;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px 999px 999px 4px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fecaca !important;
  -webkit-text-fill-color: #fecaca !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-twentysix-pulse {
  position: absolute;
  left: 50%;
  top: 46%;
  display: grid;
  place-items: center;
  width: clamp(190px, 28vw, 270px);
  height: clamp(190px, 28vw, 270px);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255,255,255,0.20), rgba(255,255,255,0.06)) !important;
  border: 1px solid rgba(255,255,255,0.16);
}

.vb-countdown-twentysix-pulse i {
  position: absolute;
  inset: 18px;
  border-radius: inherit;
  border: 2px dashed rgba(255,255,255,0.22);
}

.vb-countdown-twentysix-pulse strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(58px, 10vw, 100px);
  line-height: 0.85;
  font-weight: 950;
  letter-spacing: -0.08em;
}

.vb-countdown-twentysix-pulse span {
  color: #bbf7d0 !important;
  -webkit-text-fill-color: #bbf7d0 !important;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vb-countdown-twentysix-stat {
  position: absolute;
  display: grid;
  gap: 5px;
  padding: 16px;
  border-radius: 18px 6px 18px 6px;
  background: rgba(2, 6, 23, 0.68);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
}

.vb-countdown-twentysix-stat-one {
  left: 24px;
  bottom: 28px;
}

.vb-countdown-twentysix-stat-two {
  right: 24px;
  top: 82px;
}

.vb-countdown-twentysix-stat strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 30px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.vb-countdown-twentysix-stat span {
  color: #fecaca !important;
  -webkit-text-fill-color: #fecaca !important;
  font-size: 12px;
  font-weight: 850;
}

.vb-countdown-twentysix-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 6px 999px 999px 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: #bbf7d0 !important;
  -webkit-text-fill-color: #bbf7d0 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-twentysix-content h3 {
  max-width: 820px;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(36px, 6vw, 82px) !important;
  line-height: 0.88 !important;
  font-weight: 950 !important;
  letter-spacing: -0.085em;
  overflow-wrap: anywhere;
}

.vb-countdown-twentysix-content p {
  max-width: 690px;
  margin: 0 0 22px !important;
  color: #fee2e2 !important;
  -webkit-text-fill-color: #fee2e2 !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-twentysix-timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 12px);
  max-width: 760px;
  margin-bottom: 18px;
}

.vb-countdown-twentysix-timer div {
  min-width: 0;
  padding: clamp(15px, 2.5vw, 22px) 8px;
  border-radius: 6px 28px 6px 28px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  text-align: center;
}

.vb-countdown-twentysix-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 7px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-twentysix-timer span {
  display: block;
  color: #bbf7d0 !important;
  -webkit-text-fill-color: #bbf7d0 !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-twentysix-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.vb-countdown-twentysix-info span,
.vb-countdown-twentysix-info strong {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: #dcfce7 !important;
  -webkit-text-fill-color: #dcfce7 !important;
  font-size: 12px;
  font-weight: 850;
}

.vb-countdown-twentysix-content a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 20px;
  border-radius: 999px 8px 999px 8px;
  background: linear-gradient(135deg, #ef4444, #22c55e);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(239, 68, 68, 0.22);
}

@media (max-width: 920px) {
  .vb-countdown-twentysix-fitness {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .vb-countdown-twentysix-demo {
    border-radius: 8px 38px 8px 38px;
  }

  .vb-countdown-twentysix-fitness {
    border-radius: 6px 30px 6px 30px;
  }

  .vb-countdown-twentysix-content h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-twentysix-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-twentysix-timer strong {
    font-size: clamp(30px, 13vw, 46px);
  }

  .vb-countdown-twentysix-stat {
    position: static;
    margin: 12px;
  }

  .vb-countdown-twentysix-pulse {
    top: 42%;
  }

  .vb-countdown-twentysix-content a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-twentysix-timer {
    grid-template-columns: 1fr;
  }
}

This fitness challenge countdown timer is useful for gym landing pages, fitness app campaigns, online coaching programs, workout challenges, health promotions, personal trainer pages, and membership offer sections.

27. Multi-Timezone Event Countdown Timer

A multi-timezone event countdown timer is useful for webinars, online conferences, product launches, livestreams, virtual events, global workshops, and international campaigns where visitors may join from different locations.

This example uses a global event layout with timezone cards, a world-style grid background, event details, and a countdown that keeps cycling forward. The JavaScript uses a repeating 14-day global event cycle and also displays example event times for New York, London, and Tokyo.

Multi-timezone event countdown timer
Global webinar and event layout
Days, hours, minutes, and seconds
Timezone cards for different cities
Responsive international event section

Example 27

GLOBAL

New York Loading

London Loading

Tokyo Loading

Global Event

Multi-Timezone Event Countdown Timer

Use this countdown timer for international webinars, online conferences, global launches, livestream events, workshops, and worldwide campaign pages.

00 Days

00 Hours

00 Min

00 Sec

Next event loading Global event countdown active

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-twentyseven]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 14;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-12T16:00:00Z").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextEventEl = timer.querySelector("[data-next-event]");
  const statusEl = timer.querySelector("[data-status]");
  const nyTimeEl = timer.querySelector("[data-ny-time]");
  const londonTimeEl = timer.querySelector("[data-london-time]");
  const tokyoTimeEl = timer.querySelector("[data-tokyo-time]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getNextEvent(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return baseDate + (cyclesPassed + 1) * cycleMs;
  }

  function formatTime(timestamp, timeZone) {
    return new Date(timestamp).toLocaleTimeString("en-US", {
      timeZone: timeZone,
      hour: "2-digit",
      minute: "2-digit"
    });
  }

  function updateCountdown() {
    const now = Date.now();
    const nextEvent = getNextEvent(now);
    let remaining = nextEvent - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const dateText = new Date(nextEvent).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);

    nyTimeEl.textContent = formatTime(nextEvent, "America/New_York");
    londonTimeEl.textContent = formatTime(nextEvent, "Europe/London");
    tokyoTimeEl.textContent = formatTime(nextEvent, "Asia/Tokyo");

    nextEventEl.textContent = "Next event: " + dateText;
    statusEl.textContent = "Global event countdown active";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-twentyseven-demo">
  <section class="vb-countdown-twentyseven-event" data-vb-countdown-twentyseven data-cycle-days="14">
    <div class="vb-countdown-twentyseven-map">
      <span class="vb-countdown-twentyseven-tag">Example 27</span>

      <div class="vb-countdown-twentyseven-orbit">
        <i></i>
        <i></i>
        <i></i>
        <strong>GLOBAL</strong>
      </div>

      <div class="vb-countdown-twentyseven-zone vb-countdown-twentyseven-zone-one">
        <span>New York</span>
        <strong data-ny-time>Loading</strong>
      </div>

      <div class="vb-countdown-twentyseven-zone vb-countdown-twentyseven-zone-two">
        <span>London</span>
        <strong data-london-time>Loading</strong>
      </div>

      <div class="vb-countdown-twentyseven-zone vb-countdown-twentyseven-zone-three">
        <span>Tokyo</span>
        <strong data-tokyo-time>Loading</strong>
      </div>
    </div>

    <div class="vb-countdown-twentyseven-content">
      <span class="vb-countdown-twentyseven-kicker">Global Event</span>
      <h3>Multi-Timezone Event Countdown Timer</h3>
      <p>Use this countdown timer for international webinars, online conferences, global launches, livestream events, workshops, and worldwide campaign pages.</p>

      <div class="vb-countdown-twentyseven-timer" aria-label="Multi-timezone event countdown timer">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <div class="vb-countdown-twentyseven-meta">
        <span data-next-event>Next event loading</span>
        <strong data-status>Global event countdown active</strong>
      </div>

      <a href="#global-event-registration">Register for Event</a>
    </div>
  </section>
</div>

CSS

.vb-countdown-twentyseven-demo,
.vb-countdown-twentyseven-demo * {
  box-sizing: border-box;
}

.vb-countdown-twentyseven-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 42px);
  border-radius: 40px 8px 40px 8px;
  background:
    radial-gradient(circle at 16% 18%, rgba(14, 165, 233, 0.17), transparent 34%),
    radial-gradient(circle at 88% 22%, rgba(168, 85, 247, 0.15), transparent 34%),
    linear-gradient(135deg, #f0f9ff 0%, #faf5ff 54%, #ffffff 100%) !important;
  border: 1px solid rgba(14, 165, 233, 0.20);
  box-shadow: 0 28px 80px rgba(3, 105, 161, 0.09);
}

.vb-countdown-twentyseven-event {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(24px, 5vw, 46px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px);
  overflow: hidden;
  border-radius: 32px 6px 32px 6px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #075985 48%, #581c87 100%) !important;
  background-size: 34px 34px, 34px 34px, auto, auto !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.30);
}

.vb-countdown-twentyseven-event::before {
  content: "";
  position: absolute;
  right: -140px;
  top: -130px;
  width: 390px;
  height: 390px;
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.13);
}

.vb-countdown-twentyseven-event::after {
  content: "";
  position: absolute;
  left: -140px;
  bottom: -160px;
  width: 390px;
  height: 390px;
  border-radius: 999px;
  background: rgba(192, 132, 252, 0.13);
}

.vb-countdown-twentyseven-map,
.vb-countdown-twentyseven-content {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.vb-countdown-twentyseven-map {
  min-height: clamp(360px, 44vw, 520px);
  border-radius: 28px 6px 28px 6px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.13), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)) !important;
  border: 1px solid rgba(255,255,255,0.14);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.24);
}

.vb-countdown-twentyseven-tag {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 4;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 6px 999px 999px 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: #bae6fd !important;
  -webkit-text-fill-color: #bae6fd !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-twentyseven-orbit {
  position: absolute;
  left: 50%;
  top: 48%;
  display: grid;
  place-items: center;
  width: clamp(190px, 30vw, 300px);
  height: clamp(190px, 30vw, 300px);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255,255,255,0.17), rgba(255,255,255,0.045)) !important;
  border: 1px solid rgba(255,255,255,0.14);
}

.vb-countdown-twentyseven-orbit i {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
}

.vb-countdown-twentyseven-orbit i:nth-child(1) {
  inset: 18px;
}

.vb-countdown-twentyseven-orbit i:nth-child(2) {
  inset: 42px;
}

.vb-countdown-twentyseven-orbit i:nth-child(3) {
  inset: 70px;
}

.vb-countdown-twentyseven-orbit strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.vb-countdown-twentyseven-zone {
  position: absolute;
  display: grid;
  gap: 5px;
  min-width: 138px;
  padding: 14px;
  border-radius: 18px 6px 18px 6px;
  background: rgba(2, 6, 23, 0.68);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
}

.vb-countdown-twentyseven-zone-one {
  left: 22px;
  bottom: 30px;
}

.vb-countdown-twentyseven-zone-two {
  right: 22px;
  top: 82px;
}

.vb-countdown-twentyseven-zone-three {
  right: 36px;
  bottom: 34px;
}

.vb-countdown-twentyseven-zone span {
  color: #bae6fd !important;
  -webkit-text-fill-color: #bae6fd !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vb-countdown-twentyseven-zone strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.vb-countdown-twentyseven-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px 6px 999px 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: #e9d5ff !important;
  -webkit-text-fill-color: #e9d5ff !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-twentyseven-content h3 {
  max-width: 820px;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(36px, 6vw, 82px) !important;
  line-height: 0.88 !important;
  font-weight: 950 !important;
  letter-spacing: -0.085em;
  overflow-wrap: anywhere;
}

.vb-countdown-twentyseven-content p {
  max-width: 700px;
  margin: 0 0 22px !important;
  color: #dbeafe !important;
  -webkit-text-fill-color: #dbeafe !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-twentyseven-timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 12px);
  max-width: 760px;
  margin-bottom: 18px;
}

.vb-countdown-twentyseven-timer div {
  min-width: 0;
  padding: clamp(15px, 2.5vw, 22px) 8px;
  border-radius: 999px 999px 8px 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  text-align: center;
}

.vb-countdown-twentyseven-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 7px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-twentyseven-timer span {
  display: block;
  color: #bae6fd !important;
  -webkit-text-fill-color: #bae6fd !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-twentyseven-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.vb-countdown-twentyseven-meta span,
.vb-countdown-twentyseven-meta strong {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e9d5ff !important;
  -webkit-text-fill-color: #e9d5ff !important;
  font-size: 12px;
  font-weight: 850;
}

.vb-countdown-twentyseven-content a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 20px;
  border-radius: 8px 999px 8px 999px;
  background: linear-gradient(135deg, #0ea5e9, #a855f7);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(14, 165, 233, 0.22);
}

@media (max-width: 920px) {
  .vb-countdown-twentyseven-event {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .vb-countdown-twentyseven-demo {
    border-radius: 28px 6px 28px 6px;
  }

  .vb-countdown-twentyseven-event {
    border-radius: 24px 6px 24px 6px;
  }

  .vb-countdown-twentyseven-content h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-twentyseven-zone {
    position: static;
    margin: 10px;
  }

  .vb-countdown-twentyseven-orbit {
    top: 36%;
  }

  .vb-countdown-twentyseven-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-twentyseven-timer strong {
    font-size: clamp(30px, 13vw, 46px);
  }

  .vb-countdown-twentyseven-content a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-twentyseven-timer {
    grid-template-columns: 1fr;
  }
}

This multi-timezone event countdown timer is useful for global webinars, virtual conferences, livestream pages, online workshops, international product launches, and event registration landing pages.

28. Countdown Timer with Progress Bar

A countdown timer with progress bar is useful for sale campaigns, checkout timers, onboarding steps, course enrollment windows, event deadlines, dashboard alerts, product launches, and landing page offers where visitors should see both remaining time and campaign progress.

This example uses a progress-focused layout with a large horizontal progress bar, percentage indicator, timer chips, status text, and CTA button. The JavaScript uses a repeating 7-day cycle and updates both the countdown numbers and the visual progress bar.

Countdown timer with progress bar
Dynamic progress percentage
Days, hours, minutes, and seconds
Repeating campaign cycle
Responsive progress timer layout

Example 28

Countdown Timer with Progress Bar

Use this countdown timer with a progress bar for campaigns, checkout holds, sales, onboarding flows, course deadlines, dashboard alerts, and launch pages.

0% Time used

Campaign started Deadline loading

00 Days

00 Hours

00 Min

00 Sec

Progress countdown is active.

Continue Before Deadline

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-twentyeight]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 7;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-07T09:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const percentEl = timer.querySelector("[data-percent]");
  const progressBarEl = timer.querySelector("[data-progress-bar]");
  const nextCycleEl = timer.querySelector("[data-next-cycle]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getCycleData(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    const currentStart = baseDate + cyclesPassed * cycleMs;
    const nextEnd = baseDate + (cyclesPassed + 1) * cycleMs;

    return {
      currentStart: currentStart,
      nextEnd: nextEnd
    };
  }

  function updateCountdown() {
    const now = Date.now();
    const cycleData = getCycleData(now);
    let remaining = cycleData.nextEnd - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const elapsed = cycleMs - remaining;
    const progress = Math.min(100, Math.max(0, Math.round((elapsed / cycleMs) * 100)));

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const dateText = new Date(cycleData.nextEnd).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);

    percentEl.textContent = progress + "%";
    progressBarEl.style.width = progress + "%";
    nextCycleEl.textContent = "Ends " + dateText;
    statusEl.textContent = "Progress countdown is active.";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-twentyeight-demo">
  <section class="vb-countdown-twentyeight-progress" data-vb-countdown-twentyeight data-cycle-days="7">
    <div class="vb-countdown-twentyeight-top">
      <div>
        <span class="vb-countdown-twentyeight-kicker">Example 28</span>
        <h3>Countdown Timer with Progress Bar</h3>
        <p>Use this countdown timer with a progress bar for campaigns, checkout holds, sales, onboarding flows, course deadlines, dashboard alerts, and launch pages.</p>
      </div>

      <div class="vb-countdown-twentyeight-percent">
        <strong data-percent>0%</strong>
        <span>Time used</span>
      </div>
    </div>

    <div class="vb-countdown-twentyeight-bar-wrap">
      <div class="vb-countdown-twentyeight-bar">
        <i data-progress-bar></i>
      </div>
      <div class="vb-countdown-twentyeight-bar-labels">
        <span>Campaign started</span>
        <strong data-next-cycle>Deadline loading</strong>
      </div>
    </div>

    <div class="vb-countdown-twentyeight-bottom">
      <div class="vb-countdown-twentyeight-timer" aria-label="Countdown timer with progress bar">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <div class="vb-countdown-twentyeight-action">
        <p data-status>Progress countdown is active.</p>
        <a href="#progress-countdown-offer">Continue Before Deadline</a>
      </div>
    </div>
  </section>
</div>

CSS

.vb-countdown-twentyeight-demo,
.vb-countdown-twentyeight-demo * {
  box-sizing: border-box;
}

.vb-countdown-twentyeight-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 42px);
  border-radius: 22px 22px 6px 60px;
  background:
    radial-gradient(circle at 14% 18%, rgba(34, 197, 94, 0.15), transparent 34%),
    radial-gradient(circle at 88% 22%, rgba(59, 130, 246, 0.14), transparent 34%),
    linear-gradient(135deg, #f0fdf4 0%, #eff6ff 54%, #ffffff 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.20);
  box-shadow: 0 28px 80px rgba(21, 128, 61, 0.09);
}

.vb-countdown-twentyeight-progress {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px);
  overflow: hidden;
  border-radius: 18px 18px 6px 46px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,0.18), transparent 34%),
    linear-gradient(135deg, #052e16 0%, #14532d 52%, #1e3a8a 100%) !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
}

.vb-countdown-twentyeight-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  gap: clamp(18px, 3vw, 28px);
  align-items: end;
  margin-bottom: clamp(22px, 4vw, 34px);
}

.vb-countdown-twentyeight-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px 999px 999px 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: #bbf7d0 !important;
  -webkit-text-fill-color: #bbf7d0 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-twentyeight-top h3 {
  max-width: 860px;
  margin: 0 0 16px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(36px, 6vw, 84px) !important;
  line-height: 0.88 !important;
  font-weight: 950 !important;
  letter-spacing: -0.085em;
  overflow-wrap: anywhere;
}

.vb-countdown-twentyeight-top p {
  max-width: 760px;
  margin: 0 !important;
  color: #dcfce7 !important;
  -webkit-text-fill-color: #dcfce7 !important;
  font-size: clamp(15px, 1.8vw, 16px);
  line-height: 1.75;
  font-weight: 650;
}

.vb-countdown-twentyeight-percent {
  min-width: 0;
  padding: 22px;
  border-radius: 28px 8px 28px 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  text-align: center;
}

.vb-countdown-twentyeight-percent strong {
  display: block;
  margin-bottom: 7px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(42px, 7vw, 70px);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: -0.08em;
  font-variant-numeric: tabular-nums;
}

.vb-countdown-twentyeight-percent span {
  color: #bfdbfe !important;
  -webkit-text-fill-color: #bfdbfe !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vb-countdown-twentyeight-bar-wrap {
  margin-bottom: clamp(22px, 4vw, 34px);
  padding: clamp(16px, 3vw, 22px);
  border-radius: 26px 8px 26px 8px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.13);
}

.vb-countdown-twentyeight-bar {
  overflow: hidden;
  height: clamp(22px, 4vw, 34px);
  border-radius: 999px;
  background: rgba(255,255,255,0.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.vb-countdown-twentyeight-bar i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #22c55e, #0ea5e9, #a855f7) !important;
  box-shadow: 0 0 26px rgba(34, 197, 94, 0.35);
  transition: width 0.4s ease;
}

.vb-countdown-twentyeight-bar-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.vb-countdown-twentyeight-bar-labels span,
.vb-countdown-twentyeight-bar-labels strong {
  color: #dbeafe !important;
  -webkit-text-fill-color: #dbeafe !important;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 850;
}

.vb-countdown-twentyeight-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
  gap: clamp(18px, 3vw, 26px);
  align-items: stretch;
}

.vb-countdown-twentyeight-timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 12px);
}

.vb-countdown-twentyeight-timer div {
  min-width: 0;
  padding: clamp(16px, 2.6vw, 24px) 8px;
  border-radius: 8px 28px 8px 28px;
  background: #ffffff;
  text-align: center;
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.18);
}

.vb-countdown-twentyeight-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 7px;
  color: #166534 !important;
  -webkit-text-fill-color: #166534 !important;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-twentyeight-timer span {
  display: block;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vb-countdown-twentyeight-action {
  display: grid;
  align-content: center;
  gap: 14px;
  min-width: 0;
  padding: 22px;
  border-radius: 28px 8px 28px 8px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.13);
}

.vb-countdown-twentyeight-action p {
  margin: 0 !important;
  color: #dcfce7 !important;
  -webkit-text-fill-color: #dcfce7 !important;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 750;
}

.vb-countdown-twentyeight-action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e, #0ea5e9);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(34, 197, 94, 0.22);
}

@media (max-width: 920px) {
  .vb-countdown-twentyeight-top,
  .vb-countdown-twentyeight-bottom {
    grid-template-columns: 1fr;
  }

  .vb-countdown-twentyeight-percent {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .vb-countdown-twentyeight-demo {
    border-radius: 18px 18px 6px 38px;
  }

  .vb-countdown-twentyeight-progress {
    border-radius: 14px 14px 6px 30px;
  }

  .vb-countdown-twentyeight-top h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-twentyeight-bar-labels {
    flex-direction: column;
  }

  .vb-countdown-twentyeight-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-twentyeight-timer strong {
    font-size: clamp(30px, 13vw, 46px);
  }

  .vb-countdown-twentyeight-action a {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .vb-countdown-twentyeight-timer {
    grid-template-columns: 1fr;
  }
}

This countdown timer with progress bar is useful for sale campaigns, checkout reservation timers, launch pages, course enrollment windows, onboarding deadlines, dashboard alerts, and time-sensitive landing page offers.

29. Compact Mobile Countdown Timer

A compact mobile countdown timer is useful for mobile landing pages, sticky offer cards, app screens, small checkout notices, limited mobile deals, product pages, and narrow website sections where the countdown must stay readable without taking too much space.

This example uses a mobile-first vertical card with a compact header, stacked timer rows, small status badge, offer text, and thumb-friendly CTA button. The JavaScript uses a repeating 24-hour mobile offer cycle, so the demo keeps working and never stays expired.

Compact mobile countdown timer
Mobile-first narrow card layout
Hours, minutes, and seconds
Repeating mobile offer cycle
Responsive small-screen CTA design

Example 29 Mobile offer active

Mobile Deal

Compact Mobile Countdown Timer

Use this compact countdown timer for mobile offers, checkout reminders, app campaigns, narrow landing page CTAs, and product page promo cards.

Hours 00

Minutes 00

Seconds 00

Mobile-only bonus Save 15% before the timer resets

Claim Mobile Offer

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-twentynine]");
  if (!timer) return;

  const duration = Number(timer.getAttribute("data-duration")) || 86400;
  let remaining = duration;

  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const statusEl = timer.querySelector("[data-status]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function updateCountdown() {
    if (remaining <= 0) {
      remaining = duration;
    }

    const hours = Math.floor(remaining / 3600);
    const minutes = Math.floor((remaining / 60) % 60);
    const seconds = remaining % 60;

    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);
    statusEl.textContent = "Mobile offer active";

    remaining -= 1;
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-twentynine-demo">
  <section class="vb-countdown-twentynine-mobile" data-vb-countdown-twentynine data-duration="86400">
    <div class="vb-countdown-twentynine-phone-card">
      <div class="vb-countdown-twentynine-top">
        <span>Example 29</span>
        <strong data-status>Mobile offer active</strong>
      </div>

      <div class="vb-countdown-twentynine-content">
        <span class="vb-countdown-twentynine-kicker">Mobile Deal</span>
        <h3>Compact Mobile Countdown Timer</h3>
        <p>Use this compact countdown timer for mobile offers, checkout reminders, app campaigns, narrow landing page CTAs, and product page promo cards.</p>
      </div>

      <div class="vb-countdown-twentynine-timer" aria-label="Compact mobile countdown timer">
        <div>
          <span>Hours</span>
          <strong data-hours>00</strong>
        </div>

        <div>
          <span>Minutes</span>
          <strong data-minutes>00</strong>
        </div>

        <div>
          <span>Seconds</span>
          <strong data-seconds>00</strong>
        </div>
      </div>

      <div class="vb-countdown-twentynine-offer">
        <small>Mobile-only bonus</small>
        <strong>Save 15% before the timer resets</strong>
      </div>

      <a href="#mobile-countdown-offer">Claim Mobile Offer</a>
    </div>
  </section>
</div>

CSS

.vb-countdown-twentynine-demo,
.vb-countdown-twentynine-demo * {
  box-sizing: border-box;
}

.vb-countdown-twentynine-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 42px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 18%, rgba(244, 63, 94, 0.14), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(99, 102, 241, 0.15), transparent 34%),
    linear-gradient(135deg, #fff1f2 0%, #eef2ff 54%, #ffffff 100%) !important;
  border: 1px solid rgba(244, 63, 94, 0.18);
  box-shadow: 0 28px 80px rgba(136, 19, 55, 0.08);
}

.vb-countdown-twentynine-mobile {
  display: grid;
  place-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 42px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,0.16), transparent 34%),
    linear-gradient(135deg, #111827 0%, #4c0519 52%, #312e81 100%) !important;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
}

.vb-countdown-twentynine-phone-card {
  width: min(100%, 430px);
  min-width: 0;
  padding: clamp(18px, 5vw, 28px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 26% 14%, rgba(255,255,255,0.20), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06)) !important;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    0 34px 90px rgba(2, 6, 23, 0.32),
    inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
}

.vb-countdown-twentynine-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.vb-countdown-twentynine-top span,
.vb-countdown-twentynine-top strong {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.11);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fbcfe8 !important;
  -webkit-text-fill-color: #fbcfe8 !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.2;
}

.vb-countdown-twentynine-top strong {
  color: #c7d2fe !important;
  -webkit-text-fill-color: #c7d2fe !important;
  text-align: right;
}

.vb-countdown-twentynine-content {
  min-width: 0;
  margin-bottom: 20px;
}

.vb-countdown-twentynine-kicker {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 10px;
  border-radius: 12px 999px 999px 12px;
  background: rgba(244, 114, 182, 0.18);
  color: #fce7f3 !important;
  -webkit-text-fill-color: #fce7f3 !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-twentynine-content h3 {
  margin: 0 0 12px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(32px, 8vw, 48px) !important;
  line-height: 0.92 !important;
  font-weight: 950 !important;
  letter-spacing: -0.075em;
  overflow-wrap: anywhere;
}

.vb-countdown-twentynine-content p {
  margin: 0 !important;
  color: #e0e7ff !important;
  -webkit-text-fill-color: #e0e7ff !important;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 650;
}

.vb-countdown-twentynine-timer {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.vb-countdown-twentynine-timer div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.18);
}

.vb-countdown-twentynine-timer span {
  color: #4c0519 !important;
  -webkit-text-fill-color: #4c0519 !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vb-countdown-twentynine-timer strong {
  color: #be123c !important;
  -webkit-text-fill-color: #be123c !important;
  font-size: clamp(30px, 9vw, 48px);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}

.vb-countdown-twentynine-offer {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  padding: 15px;
  border-radius: 22px 8px 22px 8px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.13);
}

.vb-countdown-twentynine-offer small {
  color: #fbcfe8 !important;
  -webkit-text-fill-color: #fbcfe8 !important;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.vb-countdown-twentynine-offer strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 900;
}

.vb-countdown-twentynine-phone-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f43f5e, #6366f1);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(244, 63, 94, 0.24);
}

@media (max-width: 520px) {
  .vb-countdown-twentynine-demo {
    border-radius: 24px;
  }

  .vb-countdown-twentynine-mobile {
    border-radius: 22px;
    padding: 14px;
  }

  .vb-countdown-twentynine-phone-card {
    border-radius: 28px;
  }

  .vb-countdown-twentynine-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .vb-countdown-twentynine-top strong {
    text-align: left;
  }
}

@media (max-width: 340px) {
  .vb-countdown-twentynine-timer div {
    grid-template-columns: 1fr;
  }
}

This compact mobile countdown timer is useful for mobile landing pages, sticky offer cards, checkout notices, app campaigns, narrow product sections, popup offers, and small responsive CTA blocks.

30. Complete Responsive Countdown Timer Section

A complete responsive countdown timer section is useful for full landing pages, ecommerce campaigns, launch pages, SaaS offers, event promotions, product releases, lead generation pages, and website sections that need a finished hero-style countdown layout.

This final example combines a full responsive layout with a large headline, feature cards, countdown timer, progress strip, CTA buttons, trust badges, and a visual side panel. The JavaScript uses a repeating 10-day campaign cycle, so the demo remains active and works long-term.

Complete responsive countdown section
Full landing page campaign layout
Days, hours, minutes, and seconds
CTA buttons, badges, and visual panel
Responsive desktop, tablet, and mobile design

Example 30

Complete Responsive Countdown Timer Section

Use this complete countdown section for product launches, ecommerce campaigns, SaaS landing pages, event promotions, lead generation pages, and limited-time website offers.

00 Days

00 Hours

00 Min

00 Sec

Start Campaign

Next cycle loading Countdown active No signup required

Campaign Snapshot Limited offer

10 days Campaign cycle

0% Cycle progress

Responsive Mobile ready

JavaScript

(function () {
  const timer = document.querySelector("[data-vb-countdown-thirty]");
  if (!timer) return;

  const cycleDays = Number(timer.getAttribute("data-cycle-days")) || 10;
  const cycleMs = cycleDays * 24 * 60 * 60 * 1000;
  const baseDate = new Date("2026-01-11T10:00:00").getTime();

  const daysEl = timer.querySelector("[data-days]");
  const hoursEl = timer.querySelector("[data-hours]");
  const minutesEl = timer.querySelector("[data-minutes]");
  const secondsEl = timer.querySelector("[data-seconds]");
  const nextCycleEl = timer.querySelector("[data-next-cycle]");
  const statusEl = timer.querySelector("[data-status]");
  const progressBarEl = timer.querySelector("[data-progress-bar]");
  const percentEl = timer.querySelector("[data-percent]");

  function formatNumber(value) {
    return String(value).padStart(2, "0");
  }

  function getCycleData(now) {
    const cyclesPassed = Math.floor((now - baseDate) / cycleMs);
    return {
      currentStart: baseDate + cyclesPassed * cycleMs,
      nextEnd: baseDate + (cyclesPassed + 1) * cycleMs
    };
  }

  function updateCountdown() {
    const now = Date.now();
    const cycleData = getCycleData(now);
    let remaining = cycleData.nextEnd - now;

    if (remaining <= 0) {
      remaining = cycleMs;
    }

    const elapsed = cycleMs - remaining;
    const progress = Math.min(100, Math.max(0, Math.round((elapsed / cycleMs) * 100)));

    const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((remaining / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((remaining / (1000 * 60)) % 60);
    const seconds = Math.floor((remaining / 1000) % 60);

    const dateText = new Date(cycleData.nextEnd).toLocaleDateString("en-US", {
      month: "short",
      day: "numeric"
    });

    daysEl.textContent = formatNumber(days);
    hoursEl.textContent = formatNumber(hours);
    minutesEl.textContent = formatNumber(minutes);
    secondsEl.textContent = formatNumber(seconds);

    nextCycleEl.textContent = "Ends " + dateText;
    statusEl.textContent = "Countdown active";
    progressBarEl.style.width = progress + "%";
    percentEl.textContent = progress + "%";
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
})();

HTML

<div class="vb-countdown-thirty-demo">
  <section class="vb-countdown-thirty-section" data-vb-countdown-thirty data-cycle-days="10">
    <div class="vb-countdown-thirty-copy">
      <span class="vb-countdown-thirty-kicker">Example 30</span>
      <h3>Complete Responsive Countdown Timer Section</h3>
      <p>Use this complete countdown section for product launches, ecommerce campaigns, SaaS landing pages, event promotions, lead generation pages, and limited-time website offers.</p>

      <div class="vb-countdown-thirty-timer" aria-label="Complete responsive countdown timer section">
        <div>
          <strong data-days>00</strong>
          <span>Days</span>
        </div>

        <div>
          <strong data-hours>00</strong>
          <span>Hours</span>
        </div>

        <div>
          <strong data-minutes>00</strong>
          <span>Min</span>
        </div>

        <div>
          <strong data-seconds>00</strong>
          <span>Sec</span>
        </div>
      </div>

      <div class="vb-countdown-thirty-actions">
        <a href="#complete-countdown-offer">Start Campaign</a>
        <button type="button">View Details</button>
      </div>

      <div class="vb-countdown-thirty-badges">
        <span data-next-cycle>Next cycle loading</span>
        <span data-status>Countdown active</span>
        <span>No signup required</span>
      </div>
    </div>

    <div class="vb-countdown-thirty-visual">
      <div class="vb-countdown-thirty-card-main">
        <span>Campaign Snapshot</span>
        <strong>Limited offer</strong>
        <div class="vb-countdown-thirty-progress">
          <i data-progress-bar></i>
        </div>
      </div>

      <div class="vb-countdown-thirty-mini vb-countdown-thirty-mini-one">
        <strong>10 days</strong>
        <span>Campaign cycle</span>
      </div>

      <div class="vb-countdown-thirty-mini vb-countdown-thirty-mini-two">
        <strong data-percent>0%</strong>
        <span>Cycle progress</span>
      </div>

      <div class="vb-countdown-thirty-mini vb-countdown-thirty-mini-three">
        <strong>Responsive</strong>
        <span>Mobile ready</span>
      </div>
    </div>
  </section>
</div>

CSS

.vb-countdown-thirty-demo,
.vb-countdown-thirty-demo * {
  box-sizing: border-box;
}

.vb-countdown-thirty-demo {
  margin: 28px 0;
  padding: clamp(18px, 4vw, 44px);
  border-radius: 60px 20px 60px 20px;
  background:
    radial-gradient(circle at 14% 18%, rgba(56, 189, 248, 0.16), transparent 34%),
    radial-gradient(circle at 88% 22%, rgba(217, 70, 239, 0.16), transparent 34%),
    linear-gradient(135deg, #f0f9ff 0%, #fdf4ff 54%, #ffffff 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.20);
  box-shadow: 0 28px 80px rgba(12, 74, 110, 0.09);
}

.vb-countdown-thirty-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  gap: clamp(26px, 5vw, 52px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 58px);
  overflow: hidden;
  border-radius: 46px 14px 46px 14px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.20), transparent 34%),
    linear-gradient(135deg, #020617 0%, #0f172a 42%, #581c87 100%) !important;
  box-shadow: 0 34px 96px rgba(15, 23, 42, 0.32);
}

.vb-countdown-thirty-section::before {
  content: "";
  position: absolute;
  left: -160px;
  top: -160px;
  width: 420px;
  height: 420px;
  border-radius: 36% 64% 52% 48%;
  background: rgba(56, 189, 248, 0.14);
}

.vb-countdown-thirty-section::after {
  content: "";
  position: absolute;
  right: -170px;
  bottom: -170px;
  width: 430px;
  height: 430px;
  border-radius: 70% 30% 45% 55%;
  background: rgba(217, 70, 239, 0.14);
}

.vb-countdown-thirty-copy,
.vb-countdown-thirty-visual {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.vb-countdown-thirty-kicker {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px 999px 999px 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  color: #bae6fd !important;
  -webkit-text-fill-color: #bae6fd !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.vb-countdown-thirty-copy h3 {
  max-width: 880px;
  margin: 0 0 18px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(38px, 6.4vw, 88px) !important;
  line-height: 0.86 !important;
  font-weight: 950 !important;
  letter-spacing: -0.09em;
  overflow-wrap: anywhere;
}

.vb-countdown-thirty-copy p {
  max-width: 760px;
  margin: 0 0 24px !important;
  color: #e0f2fe !important;
  -webkit-text-fill-color: #e0f2fe !important;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.78;
  font-weight: 650;
}

.vb-countdown-thirty-timer {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(9px, 1.5vw, 13px);
  max-width: 780px;
  margin-bottom: 22px;
}

.vb-countdown-thirty-timer div {
  min-width: 0;
  padding: clamp(16px, 2.7vw, 24px) 8px;
  border-radius: 26px 8px 26px 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09);
}

.vb-countdown-thirty-timer strong {
  display: block;
  max-width: 100%;
  margin-bottom: 7px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(30px, 4.8vw, 58px);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.vb-countdown-thirty-timer span {
  display: block;
  color: #f0abfc !important;
  -webkit-text-fill-color: #f0abfc !important;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.vb-countdown-thirty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.vb-countdown-thirty-actions a,
.vb-countdown-thirty-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.vb-countdown-thirty-actions a {
  background: linear-gradient(135deg, #38bdf8, #d946ef);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 16px 34px rgba(56, 189, 248, 0.22);
}

.vb-countdown-thirty-actions button {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.vb-countdown-thirty-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vb-countdown-thirty-badges span {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  color: #dbeafe !important;
  -webkit-text-fill-color: #dbeafe !important;
  font-size: 12px;
  font-weight: 850;
}

.vb-countdown-thirty-visual {
  min-height: clamp(360px, 46vw, 540px);
  border-radius: 16px 44px 16px 44px;
  background:
    radial-gradient(circle at 34% 20%, rgba(255,255,255,0.19), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)) !important;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.26);
  overflow: hidden;
}

.vb-countdown-thirty-card-main {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 32px;
  display: grid;
  gap: 12px;
  padding: 22px;
  border-radius: 26px 8px 26px 8px;
  background: rgba(2, 6, 23, 0.68);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
}

.vb-countdown-thirty-card-main span {
  color: #bae6fd !important;
  -webkit-text-fill-color: #bae6fd !important;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.vb-countdown-thirty-card-main strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.065em;
}

.vb-countdown-thirty-progress {
  overflow: hidden;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

.vb-countdown-thirty-progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #d946ef) !important;
  transition: width 0.4s ease;
}

.vb-countdown-thirty-mini {
  position: absolute;
  display: grid;
  gap: 6px;
  min-width: 150px;
  padding: 16px;
  border-radius: 22px 8px 22px 8px;
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
}

.vb-countdown-thirty-mini-one {
  left: 34px;
  bottom: 38px;
}

.vb-countdown-thirty-mini-two {
  right: 28px;
  top: 210px;
}

.vb-countdown-thirty-mini-three {
  right: 38px;
  bottom: 64px;
}

.vb-countdown-thirty-mini strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.05em;
}

.vb-countdown-thirty-mini span {
  color: #e0f2fe !important;
  -webkit-text-fill-color: #e0f2fe !important;
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 960px) {
  .vb-countdown-thirty-section {
    grid-template-columns: 1fr;
  }

  .vb-countdown-thirty-visual {
    min-height: 440px;
  }
}

@media (max-width: 640px) {
  .vb-countdown-thirty-demo {
    border-radius: 38px 14px 38px 14px;
  }

  .vb-countdown-thirty-section {
    border-radius: 30px 10px 30px 10px;
  }

  .vb-countdown-thirty-copy h3 {
    font-size: 38px !important;
    letter-spacing: -0.06em;
  }

  .vb-countdown-thirty-timer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vb-countdown-thirty-timer strong {
    font-size: clamp(30px, 13vw, 48px);
  }

  .vb-countdown-thirty-actions a,
  .vb-countdown-thirty-actions button {
    width: 100%;
  }

  .vb-countdown-thirty-visual {
    min-height: auto;
    padding: 20px;
    display: grid;
    gap: 12px;
  }

  .vb-countdown-thirty-card-main,
  .vb-countdown-thirty-mini {
    position: static;
  }
}

@media (max-width: 360px) {
  .vb-countdown-thirty-timer {
    grid-template-columns: 1fr;
  }
}

This complete responsive countdown timer section is useful for launch pages, ecommerce campaigns, SaaS offers, product releases, event promotions, lead generation pages, and full-width landing page countdown sections.

JavaScript Countdown Timer Best Practices

JavaScript countdown timers work best when they make a real deadline easier to understand. A good countdown timer should be readable, accurate, responsive, and clearly connected to the action on the page, whether that action is joining an event, buying during a sale, reserving a checkout item, downloading an app, registering for a webinar, or waiting for a launch.

The most important rule is simple: the timer must support the page goal. Do not add a countdown only because it looks dynamic. Use it when timing matters, when visitors need a deadline, or when a campaign genuinely has a limited window.

Use a clear deadline

Tell users what the countdown is for: a sale end, event start, product launch, booking deadline, checkout hold, or campaign expiry.

Keep time units readable

Days, hours, minutes, and seconds should stay readable on desktop, tablet, and mobile screens without overflowing the timer boxes.

Handle the zero state

Decide what happens when the timer reaches zero: show expired text, reset the demo cycle, hide the offer, disable a button, or load the next deadline.

Use scoped JavaScript

Use unique wrappers and selectors so multiple countdown timers can exist on the same page without conflicting with each other.

Use real campaign copy

The timer should explain why the user should care. Strong labels and CTA text are just as important as the countdown numbers.

Test real screen sizes

Countdown numbers can become wide. Always test long day values, narrow mobile screens, tablet layouts, and large desktop sections.

Use fixed-date timers for real launches, webinars, events, and booking deadlines.
Use recurring timers for daily deals, weekly campaigns, demo examples, and repeated availability windows.
Use local time carefully if the campaign is based on the visitor’s local timezone.
Use UTC or timezone-aware dates for global events, livestreams, webinars, and international campaigns.
Keep CTA buttons close to the timer so users know what to do before the deadline ends.
Avoid fake urgency because misleading timers can reduce trust and make a website feel spammy.

Responsive Countdown Timer Design Tips

Responsive countdown timer design matters because timer numbers can easily become too wide on small screens. A four-column desktop timer may look great on a landing page, but the same layout can break on mobile if the numbers, labels, padding, or borders are too large.

For mobile screens, stack timer units into two columns or one column, reduce padding, use fluid font sizes with clamp(), and make sure every number uses minmax(0, 1fr) or similar layout rules so the timer does not overflow the container.

Desktop countdown sections

Use wider layouts, side visuals, horizontal timers, large headlines, progress bars, and strong CTA areas when there is enough space.

Tablet countdown layouts

Reduce complex columns, stack visual panels when needed, and keep timer boxes large enough to scan quickly.

Mobile countdown cards

Use two-column or stacked timer layouts, full-width buttons, shorter labels, and flexible number sizing for small screens.

Use fluid font sizes with clamp() for countdown numbers.
Use flexible grid columns such as repeat(4, minmax(0, 1fr)).
Switch to two columns on mobile for days, hours, minutes, and seconds.
Use one-column timers for very narrow mobile cards or sticky offer widgets.
Keep labels short when space is limited, such as “Min” and “Sec”.
Test large values because “100” days takes more space than “07” days.

Common JavaScript Countdown Timer Mistakes

Common JavaScript countdown timer mistakes usually happen when a timer is built only for the first day it is published. A hardcoded date can become expired, a layout can break on mobile, or the script can stop working when the same page contains multiple countdown components.

Most countdown timer problems are easy to avoid if you decide the timer logic first. Before styling the timer, choose whether it should use a fixed date, recurring cycle, local deadline, UTC deadline, expired message, auto-reset demo behavior, or campaign-specific action.

Using expired hardcoded dates

A countdown timer that points to an old date will show zero or negative values unless you handle the expired state or use recurring logic.

Forgetting mobile overflow

Large timer numbers can break small cards. Use flexible grids, responsive font sizes, and enough width for each timer unit.

Not explaining the deadline

Users should know whether the timer is for a sale, product launch, webinar, checkout hold, booking deadline, or event start.

Using global selectors

Generic selectors can make one timer update another timer by accident. Scope each script to a unique wrapper.

Ignoring timezone behavior

Global webinars, livestreams, and launches need careful timezone handling so visitors in different regions see the correct timing.

Creating fake urgency

A timer should be useful and honest. Fake scarcity can make an ecommerce page, service page, or landing page feel untrustworthy.

Do not rely only on visual urgency without explaining the offer or deadline.
Do not let timers stay at zero unless an expired state is the intended behavior.
Do not make countdown labels too small on mobile screens.
Do not use the same ID multiple times when copying several timer examples into one post.
Do not forget accessibility basics, including readable contrast and clear CTA text.

JavaScript Countdown Timer FAQ

Here are common questions about JavaScript countdown timers for websites, landing pages, ecommerce campaigns, product launches, event pages, webinar registrations, checkout timers, and responsive UI sections.

What is a JavaScript countdown timer?

A JavaScript countdown timer is an interactive component that calculates and displays the remaining time until a specific deadline, such as a sale end, event start, product launch, webinar, booking deadline, or checkout reservation expiry.

Where should I use countdown timers on a website?

Countdown timers work well on sale pages, product launch pages, webinar pages, event landing pages, coming soon pages, checkout pages, booking pages, app launch pages, and dashboard deadline widgets.

Should a countdown timer reset automatically?

It depends on the use case. A real event or product launch should usually use a fixed deadline. A daily deal, weekly campaign, or demo example can use recurring logic so the timer continues to work after the first cycle ends.

How do I make a countdown timer responsive?

Use flexible CSS grid columns, responsive font sizes, short labels, enough padding, and media queries that switch four timer units into two columns or one column on smaller screens.

Can I use these countdown timer examples in WordPress?

Yes. These examples use vanilla JavaScript, HTML, and CSS, so they can be pasted into a Gutenberg Custom HTML block. For a live website, repeated CSS and JavaScript should usually be moved into your theme or plugin files.

What happens when a JavaScript countdown timer reaches zero?

You can show an expired message, disable a button, hide the offer, change the CTA, display a new deadline, or reset the timer for a recurring campaign. The right behavior depends on the purpose of the timer.

Conclusion

JavaScript countdown timers are useful for websites where timing matters. They can improve sale pages, product launch sections, webinar registrations, event landing pages, checkout flows, coming soon pages, app launch pages, donation campaigns, booking deadlines, dashboard widgets, and full responsive landing page sections.

The best countdown timer is not only a set of changing numbers. It has a clear purpose, readable labels, responsive layout, strong call-to-action, honest deadline, and JavaScript logic that handles what happens when time reaches zero. That is what makes a timer useful for real users instead of just decorative animation.

You can use the examples in this guide as starting points for ecommerce campaigns, SaaS websites, landing pages, WordPress projects, event websites, online courses, app launches, nonprofit pages, and dashboard interfaces. Customize the colors, spacing, copy, dates, reset logic, and layout to match your own website design.

Continue building better website sections and interactive UI components with these related JavaScript and CSS guides. These posts work well together when building full landing pages, product pages, dashboards, forms, filters, menus, and responsive website layouts.

30 JavaScript Countdown Timer Examples – Sale Timers, Event Timers & UI Components

Table of Contents

EntitySchema Pro

What Is a JavaScript Countdown Timer?

Why Countdown Timers Matter

JavaScript Countdown Timer Types

What Should a Good Countdown Timer Include?

Clear deadline context

Readable time units

Automatic updates

Strong visual hierarchy