Loading...
Customize

Customize theme

Colors
Primary
Warning
Info
Success
Danger
Typography (1rem = 16px)
Borders / Rounding

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/2022 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:
hhttps://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>
// Countdown example
.countdown.d-flex(data-countdown-date="10/15/2030 12:00:00")
  .text-center
    .h4.mb-0(data-years)
    span.fs-sm years
  span.blinking.fs-xl.mx-2 :
  .text-center
    .h4.mb-0(data-days)
    span.fs-sm days
  span.blinking.fs-xl.mx-2 :
  .text-center
    .h4.mb-0(data-hours)
    span.fs-sm hours
  span.blinking.fs-xl.mx-2 :
  .text-center
    .h4.mb-0(data-minutes)
    span.fs-sm mins
  span.blinking.fs-xl.mx-2 :
  .text-center
    .h4.mb-0(data-seconds)
    span.fs-sm secs

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>
// Countdown example without years label
.countdown.d-flex(data-countdown-date="10/15/2030 12:00:00")
  .text-center
    .h4.mb-0(data-days)
    span.fs-sm days
  span.blinking.fs-xl.mx-2 :
  .text-center
    .h4.mb-0(data-hours)
    span.fs-sm hours
  span.blinking.fs-xl.mx-2 :
  .text-center
    .h4.mb-0(data-minutes)
    span.fs-sm mins
  span.blinking.fs-xl.mx-2 :
  .text-center
    .h4.mb-0(data-seconds)
    span.fs-sm secs

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>
// 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.
.countdown.d-flex(data-countdown-date='10/15/2030 12:00:00')
  .text-center
    .h1.mb-0(data-days)
    span.fs-lg days
  span.blinking.fs-3.mx-2 :
  ....

.countdown.d-flex(data-countdown-date='10/15/2030 12:00:00')
  .text-center
    .h2.mb-0(data-days)
    span days
  span.blinking.fs-4.mx-2 :
  ....

.countdown.d-flex(data-countdown-date='10/15/2030 12:00:00')
  .text-center
    .h3.mb-0(data-days)
    span.fs-sm days
  span.blinking.fs-4.mx-2 :
  ....

.countdown.d-flex(data-countdown-date='10/15/2030 12:00:00')
  .text-center
    .h4.mb-0(data-days)
    span.fs-sm days
  span.blinking.fs-xl.mx-2 :
  ....

.countdown.d-flex(data-countdown-date='10/15/2030 12:00:00')
  .text-center
    .h5.mb-0(data-days)
    span.fs-xs days
  span.blinking.fs-lg.mx-2 :
  ....

.countdown.d-flex(data-countdown-date='10/15/2030 12:00:00')
  .text-center
    .h6.mb-0(data-days)
    span.fs-xs days
  span.blinking.mx-2 :
  ....

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>
// Different colors. Can also be any custom color
.countdown.d-flex(data-countdown-date="10/15/2030 12:00:00")

  // Warning
  .text-center
    .text-warning.h4.mb-0(data-years)
    span.text-warning.fs-sm.opacity-80 years
  span.blinking.fs-xl.mx-2 :

  // Primary
  .text-center
    .text-primary.h4.mb-0(data-days)
    span.text-primary.fs-sm.opacity-80 days
  span.blinking.fs-xl.mx-2 :

  // Info
  .text-center
    .text-info.h4.mb-0(data-hours)
    span.text-info.fs-sm.opacity-80 hours
  span.blinking.fs-xl.mx-2 :

  // Danger
  .text-center
    .text-danger.h4.mb-0(data-minutes)
    span.text-danger.fs-sm.opacity-80 mins
  span.blinking.fs-xl.mx-2 :

  // Success
  .text-center
    .text-success.h4.mb-0(data-seconds)
    span.text-success.fs-sm.opacity-80 secs

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-muted 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-muted 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-muted 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-faded-primary 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-muted fs-2 mx-2">:</span>
  ...
</div>
// Cards example
// Style 1 (Border)
.countdown.d-flex.flex-wrap(data-countdown-date="10/15/2030 12:00:00")
  .text-center.mb-2
    .border.rounded-1.p-2
      .h3.fw-normal.mb-0.mx-1(data-days)
    span.fs-sm days
  span.blinking.text-muted.fs-2.mx-2 :
  ...

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

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

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