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/2023 07:00:00 PM'

Basic example + Alignment

0d
0h
0m
0s
<!-- Left aligned countdown (default) -->
<div class="countdown py-2 h4" data-countdown="07/01/2023 07:00:00 PM">
 <div class="countdown-days">
    <span class="countdown-value">{{_days}}</span>
    <span class="countdown-label text-muted">d</span>
 </div>
 <div class="countdown-hours">
    <span class="countdown-value">{{_hours}}</span>
    <span class="countdown-label text-muted">h</span>
 </div>
 <div class="countdown-minutes">
    <span class="countdown-value">{{_minutes}}</span>
    <span class="countdown-label text-muted">m</span>
 </div>
 <div class="countdown-seconds">
    <span class="countdown-value">{{_seconds}}</span>
    <span class="countdown-label text-muted">s</span>
 </div>
</div>

ngAfterViewInit(): void {
  /**
      * Count date set
      */
  interval(1000).pipe(map((x) => {
    this._diff = Date.parse(this.auctiontime) - Date.parse(new Date().toString());
  })).subscribe((x) => {
    this._days = this.getDays(this._diff);
    this._hours = this.getHours(this._diff);
    this._minutes = this.getMinutes(this._diff);
    this._seconds = this.getSeconds(this._diff);
  });
}

Sizing

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

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

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

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

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

<div class="countdown h6" data-countdown="07/01/2023 07:00:00 PM">
  ...
</div>

Colors

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

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

Cards example

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

<!-- Shadow version -->
<div class="countdown h5" data-countdown="07/01/2023 07:00:00 PM">
  <div class="countdown-days shadow rounded p-3">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-muted">d</span>
  </div>
  <div class="countdown-hours shadow rounded p-3">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-muted">h</span>
  </div>
  <div class="countdown-minutes shadow rounded p-3">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-muted">m</span>
  </div>
  <div class="countdown-seconds shadow rounded p-3">
    <span class="countdown-value">0</span>
    <span class="countdown-label text-muted">s</span>
  </div>
</div>
Top