Countdown

Live timers built with small scripts: fixed ISO deadlines, relative windows (data-seconds-from-now), total hours mode, progress fill, dual timers, and the legacy downCount jQuery plugin.

How these demos work

js/countdown-demos.js finds elements with data-elementer-countdown and reads data-until (ISO 8601) or data-seconds-from-now / data-minutes-from-now. Use data-count-mode for dhms, hms-total, or ms. Layouts use Bootstrap 5 utilities and CSS variables (--bs-body-bg, --bs-border-color, etc.) so list groups, progress tracks, and classic countdown cells follow the navbar light / dark toggle (data-bs-theme on <html>).

Date on MDN

1 · Classic light (floated cells)

Original .countdown styling from styles.css. Target: 2030-06-15.

–
Days
–
Hours
–
Minutes
–
Seconds

2 · Dark + rounded digits

.countdown-inverse on .bg-dark. Same deadline as #1.

–
Days
–
Hours
–
Minutes
–
Seconds

3 · Four Bootstrap cards (tabular nums)

Deadline 2031-01-01T00:00:00 — good for “annual reset” marketing.

Days
–
Hours
–
Minutes
–
Seconds
–

4 · List group + badges

Wrapped in a .card with .list-group-flush. Items use text-body and text-bg-primary badges (Bootstrap 5). Global .list-group-item rules now track data-bs-theme for dark mode.

Breakdown to

  • Days remaining –
  • Hours –
  • Minutes –
  • Seconds –

5 · Compact HH:MM:SS (10 min from load)

data-seconds-from-now="600" + data-cd-part="compact". Resets on full page reload.

Flash window
–:–:–

6 · Total hours (no day rollover)

data-count-mode="hms-total" with data-minutes-from-now="3000" (~50 h).

Long maintenance window

Hours stack past 24 for long-range technical countdowns.

Hours
–
Min
–
Sec
–

7 · Minutes + seconds only

data-count-mode="ms" with data-seconds-from-now="450" (7½ min).

Checkout hold –m –s

8 · Hero strip (New Year style)

Wide layout with gradient background. Try toggling dark mode in the navbar.

Next milestone

2030 kickoff

–
Days
–
Hours
–
Minutes
–
Seconds

9 · Live region + completion text

aria-live="polite" and data-complete-text. Timer: 2 minutes.

Offer locks in:

–m –s remaining

10 · Circular emphasis

Rings are decorative; values still update every second. Target 2030-08-01.

–
Days
–
Hrs
–
Min
–
Sec

11 · Progress (Bootstrap 5 component)

data-countdown-progress drives width on .progress-bar. The primary demo uses .cd-bs-progress (inset track, pill shape, --bs-secondary-bg). Labels update via data-cd-progress-hint and data-cd-progress-pct.

Three-minute window

Striped + animated bar; switches to .bg-success when complete.

Time left
—
Started 0% Done
data-progress-seconds="180" · Track uses theme-aware colors; respects prefers-reduced-motion for stripes.

Slim bar

Plain .progress at 0.5rem height — .bg-danger fill, no stripes.

— remaining

12 · Dual timers (short + long)

data-countdown-dual — primary data-primary-seconds="75", secondary data-secondary-seconds="7200".

OTP validity
–
Campaign ends
–

13 · jQuery downCount plugin

dependencies/jquery.downCount.js — date string 12/31/2030 23:59:59, offset: 0 (UTC offset hours; null is treated as 0).

0 days
0 hours
0 minutes
0 seconds

14 · Inline row with separators

Utility-only layout; data-until="2029-07-04T12:00:00".

–d –h –m –s

15 · data-complete-html swap

45 s demo; entire block replaced via HTML string (escape carefully in production).

Counting down…

–:–

16 · Background image panel

Full-bleed photo with .countdown-inverse. Digits use .cd-photo-count-cell — dark frosted circles with explicit white type (avoids white-on-white from text-white + light overlays).

Launch pad

–
Days
–
Hours
–
Minutes
–
Seconds

Photo via Unsplash (same URL pattern as carousel.html); replace with your own asset for offline packs.