Loading...
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

years
:
days
:
hours
:
mins
:
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

days
:
hours
:
mins
:
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

years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
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

years
:
days
:
hours
:
mins
:
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

years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
secs
years
:
days
:
hours
:
mins
:
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>