Countdown

A JavaScript widget to display a countdown (or timer).

How to

The countdown widget allows you to easily embed a countdown (or timer) in your website pages.

To use the component as a timer, you can set the data-timer attribute equal to the number of seconds you want to count:

<div class="countdown js-countdown" data-timer="104400">
  <!-- ... -->
</div>

If you want to use the widget as a countdown instead, set the data-countdown attribute equal to the countdown date:

<div class="countdown js-countdown" data-countdown="2020-03-10T20:59:00.000+00:00">
  <!-- ... -->
</div>

Here's the format you can use for your countdown date:

yyyy-mm-ddThh:mm:ss.sss+HH:00

where:

• T is the separator between date and time (no need to modify it);
• +HH:00 (or -HH:00) is the timezone; for example, use +00:00 for GMT.

If you need to show an alert message when the count is over, you can use the countDownFinished event.
Here's a simple example of how to use this event:

document.getElementsByClassName('js-countdown')[0].addEventListener('countDownFinished', function(){
  // show your alert here
});

Labels #

By default labels (e.g., minutes, seconds...) won't be visible. You can add labels to the countdown using the data-labels attribute. You can pass the labels as a list of comma-separated values. For example, in the --label variation, we set data-labels='D, H, M, S'.

To increase/decrease the size of the text elements, you can apply one of the .text-{size} classes to the component (check the --labels variation for an example of how to do that).

By default, only labels with a value different from 0 will be shown. For example, if there are only 5 hours left, the days' label won't be shown.

You can use the data-visible-labels attribute to specify the list of labels that you always want to be visible (event if equal to zero). You can pass a list of comma-separated values; for example, if you always want to show all the labels, set data-visible-labels='d, h, m, s'.

<div class="countdown js-countdown" data-countdown="2020-03-10T20:59:00.000+00:00" data-visible-labels="d, m, h, s">
  <!-- ... -->
</div>

Categories

• Plugins > Misc

Bug report & feedback

Component Github page ↗