Createx Buy now

Countdown

Timer that counts down in seconds, minutes, hours and days to any date.

Createx component
Date / time format to use inside data attribute:
data-countdown='MM/DD/YYYY HH:mm:ss AM/PM'

Example:

data-countdown='01/30/2024 07:00:00 PM'

Basic example + Alignment

0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
<!-- Left aligned countdown (default) -->
<div class="countdown h4" data-countdown="01/30/2024 07:00:00 PM">
  <div class="countdown-days">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-body">Days</span>
  </div>
  <div class="countdown-hours">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-body">Hours</span>
  </div>
  <div class="countdown-minutes">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-body">Mins</span>
  </div>
  <div class="countdown-seconds">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-body">Secs</span>
  </div>
</div>

<!-- Center aligned countdown -->
<div class="countdown h4 justify-content-center" data-countdown="01/30/2024 07:00:00 PM">
  ...
</div>

<!-- Right aligned countdown -->
<div class="countdown h4 justify-content-end" data-countdown="01/30/2024 07:00:00 PM">
  ...
</div>

Sizing

0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
<!-- Alter countdown sizing using h1-h6, display1-display4 classes -->
<div class="countdown h1" data-countdown="01/30/2024 07:00:00 PM">
  ...
</div>

<div class="countdown h2" data-countdown="01/30/2024 07:00:00 PM">
  ...
</div>

<div class="countdown h3" data-countdown="01/30/2024 07:00:00 PM">
  ...
</div>

<div class="countdown h4" data-countdown="01/30/2024 07:00:00 PM">
  ...
</div>

<div class="countdown h5" data-countdown="01/30/2024 07:00:00 PM">
  ...
</div>

<div class="countdown h6" data-countdown="01/30/2024 07:00:00 PM">
  ...
</div>

Colors

0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
<!-- Multicolor -->
<div class="countdown h4" data-countdown="01/30/2024 07:00:00 PM">
  <div class="countdown-days text-primary">
    <span class="countdown-value"></span>
    <span class="countdown-label opacity-60">Days</span>
  </div>
  <div class="countdown-hours text-warning">
    <span class="countdown-value"></span>
    <span class="countdown-label opacity-60">Hours</span>
  </div>
  <div class="countdown-minutes text-success">
    <span class="countdown-value"></span>
    <span class="countdown-label opacity-60">Mins</span>
  </div>
  <div class="countdown-seconds text-danger">
    <span class="countdown-value"></span>
    <span class="countdown-label opacity-60">Secs</span>
  </div>
</div>

<!-- Light version (white text on dark background) -->
<div class="countdown h4 text-light" data-countdown="01/30/2024 07:00:00 PM">
  <div class="countdown-days">
    <span class="countdown-value">0</span>
    <span class="countdown-label opacity-60">Days</span>
  </div>
  <div class="countdown-hours">
    <span class="countdown-value">0</span>
    <span class="countdown-label opacity-60">Hours</span>
  </div>
  <div class="countdown-minutes">
    <span class="countdown-value">0</span>
    <span class="countdown-label opacity-60">Mins</span>
  </div>
  <div class="countdown-seconds">
    <span class="countdown-value">0</span>
    <span class="countdown-label opacity-60">Secs</span>
  </div>
</div>

Cards example

0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
<!-- Border version -->
<div class="countdown h5" data-countdown="01/30/2024 07:00:00 PM">
  <div class="countdown-days border rounded py-2 px-3">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-body">Days</span>
  </div>
  <div class="countdown-hours border rounded py-2 px-3">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-body">Hours</span>
  </div>
  <div class="countdown-minutes border rounded py-2 px-3">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-body">Mins</span>
  </div>
  <div class="countdown-seconds border rounded py-2 px-3">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-body">Secs</span>
  </div>
</div>

<!-- Shadow version -->
<div class="countdown h5" data-countdown="01/30/2024 07:00:00 PM">
  <div class="countdown-days shadow-sm rounded py-2 px-3">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-body">Days</span>
  </div>
  <div class="countdown-hours shadow-sm rounded py-2 px-3">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-body">Hours</span>
  </div>
  <div class="countdown-minutes shadow-sm rounded py-2 px-3">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-body">Mins</span>
  </div>
  <div class="countdown-seconds shadow-sm rounded py-2 px-3">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-body">Secs</span>
  </div>
</div>
Top