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>
Previous Animation
Next Counter