Basic Auto-Init Countdown

This countdown uses the new single data-ce-datetime attribute for cleaner HTML.

<div class="ce-countdown" data-ce-datetime="2025-12-31 14:30"></div>

Date in the past Auto-Init Countdown

This countdown uses the new single data-ce-datetime attribute for cleaner HTML.

<div class="ce-countdown" data-ce-datetime="2022-12-31 14:30"></div>

Controlling what units are displayed

This countdown will start automatically when you scroll to this section.

<div class="ce-countdown" data-ce-datetime="2027-12-31 14:30" data-ce-units="months,days,hours,minutes,seconds"></div>

Custom Labels Auto-Init

This countdown uses custom labels via data attributes.

<h2 class="ce-countdown" data-ce-datetime="2027-12-31"
   data-ce-units="years,days,hours,minutes,seconds"
   data-ce-years-label="Années" data-ce-year-label="Année"
   data-ce-days-label="Jours" data-ce-day-label="Jour"
   data-ce-hours-label="Heures" data-ce-hour-label="Heure"
   data-ce-minutes-label="Minutes" data-ce-minute-label="Minute"
   data-ce-seconds-label="Secondes" data-ce-second-label="Seconde"></h2>

Count-Up Auto-Init

This countdown counts UP from a past date automatically.

<div class="ce-countdown" data-ce-datetime="2020-01-01"
   data-ce-count-up="true" data-ce-days-label="Days Since Launch"
   data-ce-day-label="Day Since Launch"></div>

Theme Demos with Auto-Init

See how auto-initialization works with different CountEverest themes!

Theme 1: Grid Countdown

<div class="ce-countdown ce-countdown--theme-1" data-ce-datetime="2027-12-31"></div>

Theme 6: Colorful Blocks

<div class="ce-countdown ce-countdown--theme-6" data-ce-datetime="2027-12-31"></div>

Theme 6 with Custom Accent Color

<div class="ce-countdown ce-countdown--theme-6" data-ce-datetime="2027-12-31" data-ce-accent-color="#E91E63"></div>

Theme 6 with Custom Accent Color Date in The Past

<div class="ce-countdown ce-countdown--theme-6" data-ce-datetime="2022-12-31" data-ce-accent-color="#E91E63"></div>

Theme 9: Minimal Circles (Canvas created dynamically)

<div class="ce-countdown ce-countdown--theme-9" data-ce-datetime="2027-12-31"></div>

Theme 9 with Custom Accent Color

<div class="ce-countdown ce-countdown--theme-9" data-ce-datetime="2027-12-31" data-ce-accent-color="#4CAF50"></div>

Theme 9 with Custom Accent Color Date in The Past

<div class="ce-countdown ce-countdown--theme-9" data-ce-datetime="2022-12-31" data-ce-accent-color="#4CAF50"></div>

Theme 10: Airport Flip Clock Style

<div class="ce-countdown ce-countdown--theme-10" data-ce-datetime="2027-12-31"></div>

Theme 10: Airport Flip Clock Style Date in The Past

<div class="ce-countdown ce-countdown--theme-10" data-ce-datetime="2022  -12-31"></div>

Theme 12: Animated Gradient Background

<div class="ce-countdown ce-countdown--theme-12" data-ce-datetime="2027-12-31" data-ce-units="days,hours,minutes,seconds"></div>

Theme 12: Animated Gradient Background Date in The Past

<div class="ce-countdown ce-countdown--theme-12" data-ce-datetime="2022-12-31" data-ce-units="days,hours,minutes,seconds"></div>

Theme 12 with Custom Accent Color

<div class="ce-countdown ce-countdown--theme-12" data-ce-datetime="2027-12-31" data-ce-accent-color="#5865F2" data-ce-units="days,hours,minutes,seconds"></div>