Buy now
Countdown
Timer that counts down in seconds, minutes, hours and days to any date.
Around component
Date / time format to use inside data attribute:
data-countdown='MM/DD/YYYY HH:mm:ss AM/PM'
Example:
data-countdown='10/01/2021 07:00:00 PM'
Basic example + Alignment
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
<!-- Left aligned countdown (default) -->
<div class="cs-countdown h4" data-countdown="10/01/2021 07:00:00 PM">
<div class="cs-countdown-days">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label text-body">Days</span>
</div>
<div class="cs-countdown-hours">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label text-body">Hours</span>
</div>
<div class="cs-countdown-minutes">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label text-body">Mins</span>
</div>
<div class="cs-countdown-seconds">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label text-body">Secs</span>
</div>
</div>
<!-- Center aligned countdown -->
<div class="cs-countdown h4 justify-content-center" data-countdown="10/01/2021 07:00:00 PM">
...
</div>
<!-- Right aligned countdown -->
<div class="cs-countdown h4 justify-content-end" data-countdown="10/01/2021 07:00:00 PM">
...
</div>// Left aligned countdown (default)
.cs-countdown.h4(data-countdown="10/01/2021 07:00:00 PM")
.cs-countdown-days
span.cs-countdown-value 0
span.cs-countdown-label.text-body Days
.cs-countdown-hours
span.cs-countdown-value 0
span.cs-countdown-label.text-body Hours
.cs-countdown-minutes
span.cs-countdown-value 0
span.cs-countdown-label.text-body Mins
.cs-countdown-seconds
span.cs-countdown-value 0
span.cs-countdown-label.text-body Secs
// Center aligned countdown
.cs-countdown.h4.justify-content-center(data-countdown="10/01/2021 07:00:00 PM")
...
// Right aligned countdown
.cs-countdown.h4.justify-content-end(data-countdown="10/01/2021 07:00:00 PM")
...
Sizing
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
<!-- Alter countdown sizing using h1-h6, display1-display4 classes -->
<div class="cs-countdown h1" data-countdown="10/01/2021 07:00:00 PM">
...
</div>
<div class="cs-countdown h2" data-countdown="10/01/2021 07:00:00 PM">
...
</div>
<div class="cs-countdown h3" data-countdown="10/01/2021 07:00:00 PM">
...
</div>
<div class="cs-countdown h4" data-countdown="10/01/2021 07:00:00 PM">
...
</div>
<div class="cs-countdown h5" data-countdown="10/01/2021 07:00:00 PM">
...
</div>
<div class="cs-countdown h6" data-countdown="10/01/2021 07:00:00 PM">
...
</div>// Alter countdown sizing using h1-h6, display1-display4 classes
.cs-countdown.h1(data-countdown="10/01/2021 07:00:00 PM")
...
.cs-countdown.h2(data-countdown="10/01/2021 07:00:00 PM")
...
.cs-countdown.h3(data-countdown="10/01/2021 07:00:00 PM")
...
.cs-countdown.h4(data-countdown="10/01/2021 07:00:00 PM")
...
.cs-countdown.h5(data-countdown="10/01/2021 07:00:00 PM")
...
.cs-countdown.h6(data-countdown="10/01/2021 07:00:00 PM")
...
Colors
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
<!-- Multicolor -->
<div class="cs-countdown h4" data-countdown="10/01/2021 07:00:00 PM">
<div class="cs-countdown-days text-primary">
<span class="cs-countdown-value"></span>
<span class="cs-countdown-label opacity-60">Days</span>
</div>
<div class="cs-countdown-hours text-warning">
<span class="cs-countdown-value"></span>
<span class="cs-countdown-label opacity-60">Hours</span>
</div>
<div class="cs-countdown-minutes text-success">
<span class="cs-countdown-value"></span>
<span class="cs-countdown-label opacity-60">Mins</span>
</div>
<div class="cs-countdown-seconds text-danger">
<span class="cs-countdown-value"></span>
<span class="cs-countdown-label opacity-60">Secs</span>
</div>
</div>
<!-- Light version (white text on dark background) -->
<div class="cs-countdown h4 text-light" data-countdown="10/01/2021 07:00:00 PM">
<div class="cs-countdown-days">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label opacity-60">Days</span>
</div>
<div class="cs-countdown-hours">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label opacity-60">Hours</span>
</div>
<div class="cs-countdown-minutes">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label opacity-60">Mins</span>
</div>
<div class="cs-countdown-seconds">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label opacity-60">Secs</span>
</div>
</div>// Multicolor
.cs-countdown.h4(data-countdown="10/01/2021 07:00:00 PM")
.cs-countdown-days.text-primary
span.cs-countdown-value 0
span.cs-countdown-label.opacity-60 Days
.cs-countdown-hours.text-warning
span.cs-countdown-value 0
span.cs-countdown-label.opacity-60 Hours
.cs-countdown-minutes.text-success
span.cs-countdown-value 0
span.cs-countdown-label.opacity-60 Mins
.cs-countdown-seconds.text-danger
span.cs-countdown-value 0
span.cs-countdown-label.opacity-60 Secs
// Light version (white text on dark background)
.cs-countdown.h4.text-light(data-countdown="10/01/2021 07:00:00 PM")
.cs-countdown-days
span.cs-countdown-value 0
span.cs-countdown-label.opacity-60 Days
.cs-countdown-hours
span.cs-countdown-value 0
span.cs-countdown-label.opacity-60 Hours
.cs-countdown-minutes
span.cs-countdown-value 0
span.cs-countdown-label.opacity-60 Mins
.cs-countdown-seconds
span.cs-countdown-value 0
span.cs-countdown-label.opacity-60 Secs
Cards example
0Days
0Hours
0Mins
0Secs
0Days
0Hours
0Mins
0Secs
<!-- Border version -->
<div class="cs-countdown h5" data-countdown="10/01/2021 07:00:00 PM">
<div class="cs-countdown-days border rounded py-2 px-3">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label text-body">Days</span>
</div>
<div class="cs-countdown-hours border rounded py-2 px-3">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label text-body">Hours</span>
</div>
<div class="cs-countdown-minutes border rounded py-2 px-3">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label text-body">Mins</span>
</div>
<div class="cs-countdown-seconds border rounded py-2 px-3">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label text-body">Secs</span>
</div>
</div>
<!-- Shadow version -->
<div class="cs-countdown h5" data-countdown="10/01/2021 07:00:00 PM">
<div class="cs-countdown-days box-shadow rounded py-2 px-3">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label text-body">Days</span>
</div>
<div class="cs-countdown-hours box-shadow rounded py-2 px-3">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label text-body">Hours</span>
</div>
<div class="cs-countdown-minutes box-shadow rounded py-2 px-3">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label text-body">Mins</span>
</div>
<div class="cs-countdown-seconds box-shadow rounded py-2 px-3">
<span class="cs-countdown-value">0</span>
<span class="cs-countdown-label text-body">Secs</span>
</div>
</div>// Border version
.cs-countdown.h5(data-countdown="10/01/2021 07:00:00 PM")
.cs-countdown-days.border.rounded.py-2.px-3
span.cs-countdown-value 0
span.cs-countdown-label.text-body Days
.cs-countdown-hours.border.rounded.py-2.px-3
span.cs-countdown-value 0
span.cs-countdown-label.text-body Hours
.cs-countdown-minutes.border.rounded.py-2.px-3
span.cs-countdown-value 0
span.cs-countdown-label.text-body Mins
.cs-countdown-seconds.border.rounded.py-2.px-3
span.cs-countdown-value 0
span.cs-countdown-label.text-body Secs
// Shadow version
.cs-countdown.h5(data-countdown="10/01/2021 07:00:00 PM")
.cs-countdown-days.box-shadow.rounded.py-2.px-3
span.cs-countdown-value 0
span.cs-countdown-label.text-body Days
.cs-countdown-hours.box-shadow.rounded.py-2.px-3
span.cs-countdown-value 0
span.cs-countdown-label.text-body Hours
.cs-countdown-minutes.box-shadow.rounded.py-2.px-3
span.cs-countdown-value 0
span.cs-countdown-label.text-body Mins
.cs-countdown-seconds.box-shadow.rounded.py-2.px-3
span.cs-countdown-value 0
span.cs-countdown-label.text-body Secs