Countdown

Countdown is a plugin tailored to be used in any layout, without any CSS/HTML dependency. The goal was to fit and mimic different countdown styles as you see out there in coupons and auction sites.

Usage

JS

In order to use this plugin on your page you will need to include the following script in the page.

copy

<script src="assets/libs/count-down/countdown.js"></script>

Initialization

Add the below init function before the closing </body> tag, to enable it.

copy

<script>
    $(document).on('ready', function () {
        $(".countdown").countdown({
            date: "01 Jan 2021 00:01:00", //set your date and time. EX: 15 May 2014 12:00:00
            format: "on"
        });
    });
</script>

Examples

  • 00

    days

  • 00

    hours

  • 00

    minutes

  • 00

    seconds

copy

<ul class="countdown text-center list-inline-item pl-0">

    <!-- Days -->
    <li class="list-inline-item pr-2 pr-sm-4 py-3"><span class="days h1">00</span>
        <p class="timeRefDays text-center mb-0">days</p>
    </li>
    <!-- End Days -->

    <!-- Hours -->
    <li class="list-inline-item px-2 px-sm-4 py-3"><span class="hours h1">00</span>
        <p class="timeRefHours mb-0">hours</p>
    </li>
    <!-- End Hours -->

    <!-- Minutes -->
    <li class="list-inline-item px-2 px-sm-4 py-3"><span class="minutes h1">00</span>
        <p class="timeRefMinutes mb-0">minutes</p>
    </li>
    <!-- End Minutes -->

    <!-- Seconds -->
    <li class="list-inline-item pl-2 pl-sm-4 py-3"><span class="seconds h1">00</span>
        <p class="timeRefSeconds mb-0">seconds</p>
    </li>
    <!-- End Seconds -->

</ul>