### 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>