Cartzilla Buy now

Countdown

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

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

Example:

data-countdown='07/01/2021 07:00:00 PM'

Basic example + Alignment

d
h
m
s
d
h
m
s
d
h
m
s
<!-- Left aligned countdown (default) -->
<div class="cz-countdown h4" data-countdown="07/01/2021 07:00:00 PM">
  <div class="cz-countdown-days">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label text-muted">d</span>
  </div>
  <div class="cz-countdown-hours">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label text-muted">h</span>
  </div>
  <div class="cz-countdown-minutes">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label text-muted">m</span>
  </div>
  <div class="cz-countdown-seconds">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label text-muted">s</span>
  </div>
</div>

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

<!-- Right aligned countdown -->
<div class="cz-countdown h4 justify-content-end" data-countdown="07/01/2021 07:00:00 PM">
  ...
</div>
// Left aligned countdown (default)
.cz-countdown.h4(data-countdown="07/01/2021 07:00:00 PM")
  .cz-countdown-days
    span.cz-countdown-value
    span.cz-countdown-label.text-muted d
  .cz-countdown-hours
    span.cz-countdown-value
    span.cz-countdown-label.text-muted h
  .cz-countdown-minutes
    span.cz-countdown-value
    span.cz-countdown-label.text-muted m
  .cz-countdown-seconds
    span.cz-countdown-value
    span.cz-countdown-label.text-muted s

// Center aligned countdown
.cz-countdown.h4.justify-content-center(data-countdown="07/01/2021 07:00:00 PM")
  ...

// Right aligned countdown
.cz-countdown.h4.justify-content-end(data-countdown="07/01/2021 07:00:00 PM")
  ...

Sizing

d
h
m
s
d
h
m
s
d
h
m
s
d
h
m
s
d
h
m
s
d
h
m
s
<!-- Alter countdown sizing using h1-h6, display1-display4 classes -->
<div class="cz-countdown h1" data-countdown="07/01/2021 07:00:00 PM">
  ...
</div>

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

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

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

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

<div class="cz-countdown h6" data-countdown="07/01/2021 07:00:00 PM">
  ...
</div>
// Alter countdown sizing using h1-h6, display1-display4 classes
.cz-countdown.h1(data-countdown="07/01/2021 07:00:00 PM")
  ...

.cz-countdown.h2(data-countdown="07/01/2021 07:00:00 PM")
  ...

.cz-countdown.h3(data-countdown="07/01/2021 07:00:00 PM")
  ...

.cz-countdown.h4(data-countdown="07/01/2021 07:00:00 PM")
  ...

.cz-countdown.h5(data-countdown="07/01/2021 07:00:00 PM")
  ...

.cz-countdown.h6(data-countdown="07/01/2021 07:00:00 PM")
  ...

Colors

d
h
m
s
d
h
m
s
<!-- Multicolor -->
<div class="cz-countdown h4" data-countdown="07/01/2021 07:00:00 PM">
  <div class="cz-countdown-days text-accent">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label opacity-60">d</span>
  </div>
  <div class="cz-countdown-hours text-warning">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label opacity-60">h</span>
  </div>
  <div class="cz-countdown-minutes text-success">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label opacity-60">m</span>
  </div>
  <div class="cz-countdown-seconds text-danger">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label opacity-60">s</span>
  </div>
</div>

<!-- Light version (white text on dark background) -->
<div class="cz-countdown h4 text-light" data-countdown="07/01/2021 07:00:00 PM">
  <div class="cz-countdown-days">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label opacity-60">d</span>
  </div>
  <div class="cz-countdown-hours">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label opacity-60">h</span>
  </div>
  <div class="cz-countdown-minutes">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label opacity-60">m</span>
  </div>
  <div class="cz-countdown-seconds">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label opacity-60">s</span>
  </div>
</div>
// Multicolor
.cz-countdown.h4(data-countdown="07/01/2021 07:00:00 PM")
  .cz-countdown-days.text-accent
    span.cz-countdown-value
    span.cz-countdown-label.opacity-60 d
  .cz-countdown-hours.text-warning
    span.cz-countdown-value
    span.cz-countdown-label.opacity-60 h
  .cz-countdown-minutes.text-success
    span.cz-countdown-value
    span.cz-countdown-label.opacity-60 m
  .cz-countdown-seconds.text-danger
    span.cz-countdown-value
    span.cz-countdown-label.opacity-60 s

// Light version (white text on dark background)
.cz-countdown.h4.text-light(data-countdown="07/01/2021 07:00:00 PM")
  .cz-countdown-days
    span.cz-countdown-value
    span.cz-countdown-label.opacity-60 d
  .cz-countdown-hours
    span.cz-countdown-value
    span.cz-countdown-label.opacity-60 h
  .cz-countdown-minutes
    span.cz-countdown-value
    span.cz-countdown-label.opacity-60 m
  .cz-countdown-seconds
    span.cz-countdown-value
    span.cz-countdown-label.opacity-60 s

Cards example

d
h
m
s
d
h
m
s
<!-- Border version -->
<div class="cz-countdown h5" data-countdown="07/01/2021 07:00:00 PM">
  <div class="cz-countdown-days border rounded p-3">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label text-muted">d</span>
  </div>
  <div class="cz-countdown-hours border rounded p-3">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label text-muted">h</span>
  </div>
  <div class="cz-countdown-minutes border rounded p-3">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label text-muted">m</span>
  </div>
  <div class="cz-countdown-seconds border rounded p-3">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label text-muted">s</span>
  </div>
</div>

<!-- Shadow version -->
<div class="cz-countdown h5" data-countdown="07/01/2021 07:00:00 PM">
  <div class="cz-countdown-days box-shadow rounded p-3">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label text-muted">d</span>
  </div>
  <div class="cz-countdown-hours box-shadow rounded p-3">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label text-muted">h</span>
  </div>
  <div class="cz-countdown-minutes box-shadow rounded p-3">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label text-muted">m</span>
  </div>
  <div class="cz-countdown-seconds box-shadow rounded p-3">
    <span class="cz-countdown-value"></span>
    <span class="cz-countdown-label text-muted">s</span>
  </div>
</div>
// Border version
.cz-countdown.h5(data-countdown="07/01/2021 07:00:00 PM")
  .cz-countdown-days.border.rounded.p-3
    span.cz-countdown-value
    span.cz-countdown-label.text-muted d
  .cz-countdown-hours.border.rounded.p-3
    span.cz-countdown-value
    span.cz-countdown-label.text-muted h
  .cz-countdown-minutes.border.rounded.p-3
    span.cz-countdown-value
    span.cz-countdown-label.text-muted m
  .cz-countdown-seconds.border.rounded.p-3
    span.cz-countdown-value
    span.cz-countdown-label.text-muted s

// Shadow version
.cz-countdown.h5(data-countdown="07/01/2021 07:00:00 PM")
  .cz-countdown-days.box-shadow.rounded.p-3
    span.cz-countdown-value
    span.cz-countdown-label.text-muted d
  .cz-countdown-hours.box-shadow.rounded.p-3
    span.cz-countdown-value
    span.cz-countdown-label.text-muted h
  .cz-countdown-minutes.box-shadow.rounded.p-3
    span.cz-countdown-value
    span.cz-countdown-label.text-muted m
  .cz-countdown-seconds.box-shadow.rounded.p-3
    span.cz-countdown-value
    span.cz-countdown-label.text-muted s
Top