Countdown

A simple html agnostic date countdown plugin for jQuery.

Usage

Use data-countdown attribute and define the date.

32 days 20:58:20

HTML


<div data-countdown="2025/06/30"></div>

JavaScript


<!-- Vendor Javascripts -->
<script src="../assets/vendor/jquery-countdown/dist/jquery.countdown.min.js"></script>

For more Details see jQuery.countdown Documentation

Customization

Add data-countdown-template='' attribute to the element and create your own countdown

32 days

20 hours

58 minutes

20 seconds


<div class="text-secondary" data-countdown="2025/06/30" data-countdown-template='
    &lt;h2 class="mx-4 fs-3 fs-lg-6 fw-medium"&gt;%D&lt;span class="d-block fs-0 fs-lg-1 text-primary"&gt; days&lt;/span&gt;&lt;/h2&gt;
    &lt;h2 class="mx-4 fs-3 fs-lg-6 fw-medium"&gt;%H&lt;span class="d-block fs-0 fs-lg-1 text-primary"&gt; hours&lt;/span&gt;&lt;/h2&gt;
    &lt;h2 class="mx-4 fs-3 fs-lg-6 fw-medium"&gt;%M&lt;span class="d-block fs-0 fs-lg-1 text-primary"&gt; minutes&lt;/span&gt;&lt;/h2&gt;
    &lt;h2 class="d-none d-lg-block mx-4 fs-3 fs-lg-6 fw-medium"&gt;%S&lt;span class="d-block fs-0 fs-lg-1 text-primary"&gt; seconds&lt;/span&gt;&lt;/h2&gt;
'></div>

Usage
Customization