Loading...
Customize

Customize theme

Colors
Primary
Warning
Info
Success
Danger
Typography (1rem = 16px)
Borders / Rounding
Around UI Kit
Buy now

Menu

Content

Components

Utilities

Buy now

Countdown

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

Around component
Data attributes API

Around added extra layer of data attribute to access the date option of the plugin right from the HTML document:

data-countdown-date='08/13/2023 14:53:00 UTC-08:00' - UTC offset can be positive (+) or negative (-).

More on UTC offsets by countries read here.

Additional options and events can be passed to pligin init function in src/js/components/countdown.js

For more features / options visit plugin website:
https://github.com/BrooonS/timezz#readme

Basic example

05
years
:
198
days
:
17
hours
:
01
mins
:
22
secs 
<!-- Countdown example -->
<div class="countdown d-flex" data-countdown-date="10/15/2030 12:00:00">
  <div class="text-center">
    <div class="h4 mb-0" data-years></div>
    <span class="fs-sm">years</span>
  </div>
  <span class="blinking fs-xl mx-2">:</span>
  <div class="text-center">
    <div class="h4 mb-0" data-days></div>
    <span class="fs-sm">days</span>
  </div>
  <span class="blinking fs-xl mx-2">:</span>
  <div class="text-center">
    <div class="h4 mb-0" data-hours></div>
    <span class="fs-sm">hours</span>
  </div>
  <span class="blinking fs-xl mx-2">:</span>
  <div class="text-center">
    <div class="h4 mb-0" data-minutes></div>
    <span class="fs-sm">mins</span>
  </div>
  <span class="blinking fs-xl mx-2">:</span>
  <div class="text-center">
    <div class="h4 mb-0" data-seconds></div>
    <span class="fs-sm">secs</span>
  </div>
</div>

Display no years

2023
days
:
17
hours
:
01
mins
:
22
secs 
<!-- Countdown example without years label -->
<div class="countdown d-flex" data-countdown-date="10/15/2030 12:00:00">
  <div class="text-center">
    <div class="h4 mb-0" data-days></div>
    <span class="fs-sm">days</span>
  </div>
  <span class="blinking fs-xl mx-2">:</span>
  <div class="text-center">
    <div class="h4 mb-0" data-hours></div>
    <span class="fs-sm">hours</span>
  </div>
  <span class="blinking fs-xl mx-2">:</span>
  <div class="text-center">
    <div class="h4 mb-0" data-minutes></div>
    <span class="fs-sm">mins</span>
  </div>
  <span class="blinking fs-xl mx-2">:</span>
  <div class="text-center">
    <div class="h4 mb-0" data-seconds></div>
    <span class="fs-sm">secs</span>
  </div>
</div>

Sizing

05
years
:
198
days
:
17
hours
:
01
mins
:
22
secs
05
years
:
198
days
:
17
hours
:
01
mins
:
22
secs
05
years
:
198
days
:
17
hours
:
01
mins
:
22
secs
05
years
:
198
days
:
17
hours
:
01
mins
:
22
secs
05
years
:
198
days
:
17
hours
:
01
mins
:
22
secs
05
years
:
198
days
:
17
hours
:
01
mins
:
22
secs 
<!-- Sizing -->
<!-- Apply heading classes like .h1, .h2, .h3 ..., .display-1, .display-2, .display-3 ... to numbers and body size classes like fs-xs, fs-sm, fs-lg... to labels. -->
<div class="countdown d-flex" data-countdown-date="10/15/2030 12:00:00">
  <div class="text-center">
    <div class="h1 mb-0" data-days></div>
    <span class="fs-lg">days</span>
  </div>
  <span class="blinking fs-3 mx-2">:</span>
  ...
</div>

<div class="countdown d-flex" data-countdown-date="10/15/2030 12:00:00">
  <div class="text-center">
    <div class="h2 mb-0" data-days></div>
    <span>days</span>
  </div>
  <span class="blinking fs-4 mx-2">:</span>
  ...
</div>

<div class="countdown d-flex" data-countdown-date="10/15/2030 12:00:00">
  <div class="text-center">
    <div class="h3 mb-0" data-days></div>
    <span class="fs-sm">days</span>
  </div>
  <span class="blinking fs-4 mx-2">:</span>
  ...
</div>

<div class="countdown d-flex" data-countdown-date="10/15/2030 12:00:00">
  <div class="text-center">
    <div class="h4 mb-0" data-days></div>
    <span class="fs-sm">days</span>
  </div>
  <span class="blinking fs-xl mx-2">:</span>
  ...
</div>

<div class="countdown d-flex" data-countdown-date="10/15/2030 12:00:00">
  <div class="text-center">
    <div class="h5 mb-0" data-days></div>
    <span class="fs-xs">days</span>
  </div>
  <span class="blinking fs-lg mx-2">:</span>
  ...
</div>

<div class="countdown d-flex" data-countdown-date="10/15/2030 12:00:00">
  <div class="text-center">
    <div class="h6 mb-0" data-days></div>
    <span class="fs-xs">days</span>
  </div>
  <span class="blinking mx-2">:</span>
  ...
</div>

Colors

05
years
:
198
days
:
17
hours
:
01
mins
:
22
secs 
<!-- Different colors. Can also be any custom color -->
<div class="countdown d-flex" data-countdown-date="10/15/2030 12:00:00">

  <!-- Warning -->
  <div class="text-center">
    <div class="text-warning h4 mb-0" data-years></div>
    <span class="text-warning fs-sm opacity-80">years</span>
  </div>
  <span class="blinking fs-xl mx-2">:</span>

  <!-- Primary -->
  <div class="text-center">
    <div class="text-primary h4 mb-0" data-days></div>
    <span class="text-primary fs-sm opacity-80">days</span>
  </div>
  <span class="blinking fs-xl mx-2">:</span>

  <!-- Info -->
  <div class="text-center">
    <div class="text-info h4 mb-0" data-hours></div>
    <span class="text-info fs-sm opacity-80">hours</span>
  </div>
  <span class="blinking fs-xl mx-2">:</span>

  <!-- Danger -->
  <div class="text-center">
    <div class="text-danger h4 mb-0" data-minutes></div>
    <span class="text-danger fs-sm opacity-80">mins</span>
  </div>
  <span class="blinking fs-xl mx-2">:</span>

  <!-- Success -->
  <div class="text-center">
    <div class="text-success h4 mb-0" data-seconds></div>
    <span class="text-success fs-sm opacity-80">secs</span>
  </div>
</div>

Cards example

05
years
:
198
days
:
17
hours
:
01
mins
:
22
secs
05
years
:
198
days
:
17
hours
:
01
mins
:
22
secs
05
years
:
198
days
:
17
hours
:
01
mins
:
22
secs
05
years
:
198
days
:
17
hours
:
01
mins
:
22
secs 
<!-- Cards example -->
<!-- Style 1 (Border) -->
<div class="countdown d-flex flex-wrap" data-countdown-date="10/15/2030 12:00:00">
  <div class="text-center mb-2">
    <div class="border rounded-1 p-2" data-days></div>
      <div class="h3 fw-normal mb-0 mx-1" data-days></div>
    </div>
    <span class="fs-sm">days</span>
  </div>
  <span class="blinking text-body-secondary fs-2 mx-2">:</span>
  ...
</div>

<!-- Style 2 (Light background) -->
<div class="countdown d-flex flex-wrap" data-countdown-date="10/15/2030 12:00:00">
  <div class="text-center mb-2">
    <div class="bg-light rounded-1 p-2" data-days></div>
      <div class="h3 fw-normal mb-0 mx-1" data-days></div>
    </div>
    <span class="text-nav fs-sm">days</span>
  </div>
  <span class="blinking text-body-secondary fs-2 mx-2">:</span>
  ...
</div>

<!-- Style 3 (Gray (secondary) background) -->
<div class="countdown d-flex flex-wrap" data-countdown-date="10/15/2030 12:00:00">
  <div class="text-center mb-2">
    <div class="bg-secondary rounded-1 p-2" data-days></div>
      <div class="h3 fw-normal mb-0 mx-1" data-days></div>
    </div>
    <span class="fs-sm">days</span>
  </div>
  <span class="blinking text-body-secondary fs-2 mx-2">:</span>
  ...
</div>

<!-- Style 4 (Multicolor) -->
<div class="countdown d-flex flex-wrap" data-countdown-date="10/15/2030 12:00:00">
  <div class="text-center mb-2">
    <div class="bg-primary bg-opacity-10 rounded-1 p-2" data-days></div>
      <div class="text-primary h3 fw-normal mb-0 mx-1" data-days></div>
    </div>
    <span class="text-primary fs-sm opacity-80">days</span>
  </div>
  <span class="blinking text-body-secondary fs-2 mx-2">:</span>
  ...
</div>