Countdown
A simple and HTML agnostic date countdown plugin with different countdown options.
How to use? #
Add attributes data-countdown="true" and
data-countdown-end= to wrapper tag. Add
class .day, .hour,
.minute, .second
to change value.
Basic example #
02
days
:
24
hours
:
15
minutes
:
41
seconds
<div class="countdown d-flex justify-content-center"
data-countdown="true"
data-countdown-end="Dec 27, 2021 18:24:25">
<div class="countdown-item d-flex flex-column text-center">
<span class="value text-dark lh-1 d-inline-block mb-4 day">02</span>
<span class="text-uppercase font-size-sm font-weight-semibold text-gray">days</span>
</div>
<div class="separate text-dark lh-1">:</div>
<div class="countdown-item d-flex flex-column text-center">
<span class="value text-dark lh-1 d-inline-block mb-4 hour">24</span>
<span class="text-uppercase font-size-sm font-weight-semibold text-gray">hours</span>
</div>
<div class="separate text-dark lh-1">:</div>
<div class="countdown-item d-flex flex-column text-center">
<span class="value text-dark lh-1 d-inline-block mb-4 minute">15</span>
<span class="text-uppercase font-size-sm font-weight-semibold text-gray">minutes</span>
</div>
<div class="separate text-dark lh-1">:</div>
<div class="countdown-item d-flex flex-column text-center">
<span class="value text-dark lh-1 d-inline-block mb-4 second">41</span>
<span class="text-uppercase font-size-sm font-weight-semibold text-gray">seconds</span>
</div>
</div>