Countdown

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

Around component

Countdown component depends on Timezz plugin. Make sure to link to Timezz JavaScript file in your document: assets/vendor/timezz/dist/timezz.js. Use this page as a reference.

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

Customize theme

Colors

Typography (1rem = 16px)

Borders / Rounding

Menu

Content

Components

Utilities

Countdown

Data attributes API

For more features / options visit plugin website:

Basic example

Display no years

Sizing

Colors

Cards example