Go to homepage

Projects /


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

View Demo

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">
  <!-- ... -->

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">
  <!-- ... -->

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



  • 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">
  <!-- ... -->


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.