Spyre Spyre

Countdown

A simple html agnostic date countdown plugin for jQuery.

Usage

Use data-countdown attribute and define the date.

00 days 00:00:00
HTML

<div data-countdown="2019/06/30"></div>
Copy
JavaScript

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

For more Details see jQuery.countdown Documentation

Customization

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

00 days

00 hours

00 minutes

00 seconds


<div class="text-secondary" data-countdown="2019/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>
Copy