Countdown

Bootstrap 5 Countdown plugin

Countdown plugin built with the Bootstrap 5. Examples of timers, counters, stopwatch, number counts, counter box & more.

Note: Read the API tab to find all available options and advanced customization

Basic example

Create default Countdown by adding data-mdb-countdown to a container element with a Countdown expiration date value. Add countdown-unit class and an attribute data-mdb- with time unit to a child element to indicate which time units should be displayed inside Countdown.

Interval

Create interval that will reset timer every time initial countdown ends.

Label

Create label for each time unit by adding data-mdb-countdown-label with a text of your choice.

Separator

Add data-mdb-countdown-separator to a container element to insert separator between each time unit.

Separator won't be visible for Countdown column position

Styling

Countdown position

Change default horizontal position of Countdown with data-mdb-countdown-position="vertical"

Label position

Change default vertical position of Countdown label with data-mdb-countdown-label-position="horizontal"

Text size

Change default time unit text size (4rem) with data-mdb-countdown-text-size.

Custom classes

Add custom classes to time unit value and label with data-mdb-countdown-text-style and data-mdb-countdown-label-style

Countdown - API

Usage

Create default Countdown by adding data-mdb-countdown to a container element with a Countdown expiration date value. Date value should be passed using proper Date format.
Add countdown-unit class to a child element to indicate unit styling and countdown-* class, where * indicating which time units should be displayed inside Countdown.

Via data attributes


        <div data-mdb-countdown="31 December 2021 23:59:59">
          <div class="countdown-unit countdown-days"></div>
          <div class="countdown-unit countdown-hours"></div>
          <div class="countdown-unit countdown-minutes"></div>
          <div class="countdown-unit countdown-seconds"></div>
        </div>

Via JavaScript


        <div id="countdown-element">
          <div class="countdown-unit countdown-days"></div>
          <div class="countdown-unit countdown-hours"></div>
          <div class="countdown-unit countdown-minutes"></div>
          <div class="countdown-unit countdown-seconds"></div>
        </div>
      

        const countdownExample = document.getElementById('countdown-element');
        new Countdown(countdownExample, {
        countdown: "31 December 2021 23:59:59",
        })

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own. 


        <div id="countdown-element">
          <div class="countdown-unit countdown-days"></div>
          <div class="countdown-unit countdown-hours"></div>
          <div class="countdown-unit countdown-minutes"></div>
          <div class="countdown-unit countdown-seconds"></div>
        </div>
      

        $('#countdown-element').countdown();

Options

Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-. Each option can be passed with value or null.

Name Type Default Description
countdown String '' Initiates Countdown instance on element. Takes the value of the date to which the timer will be counting.
'unit' Attached to children element defines time unit to be displayed on element. Possible values: data-mdb-"days | hours | minutes | seconds".
'countdownInterval' Number 0 Sets interval in seconds that will reset timer after given amount of time after initial countdown ends.
countdownLabel String '' Attached to children element defines time unit label to be displayed on element.
countdownSeparator String '' Attached to container element defines separator used between each time unit value. Separator is not visible in vertical position of the Countdown element.
countdownPosition String 'horizontal' Positions Countdown element horizontally or vertically.
countdownLabelPosition String 'vertical' Positions the label at the bottom or next to the corresponding time unit value.
countdownTextStyle String '' Adds custom styles to all time unit text elements.
countdownLabelStyle String '' Adds custom styles to all labels.
countdownTextSize String '' Sets size of time unit text element. Text for labels in vertical label position is four times smaller than time unit text.

Methods

Name Parameters Description Example
stop Stops the timer. instance.stop()
start Starts stopped timer. instance.start()
setCountdownDate date Dynamically sets new date to count to instance.setCountdownDate('31 December 2021 23:59:59')
dispose Disposes a Countdown instance. instance.dispose()
getInstance element Static method which allows to get the countdown instance associated with a DOM element. Countdown.getInstance(couontdownElement) 

        const countdownElement = document.getElementById('countdown-element');
        const instance = Countdown.getInstance(countdownElement);
        instance.stop();
        instance.start();

Events

Name Description
start.mdb.countdown This event fires immediately when the countdown starts counting.
end.mdb.countdown This event fires immediately when the countdown timer stops counting. 

          document.addEventListener('start.mdb.countdown', (e)=> {
          // do something...
          })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component: 


        import Countdown from 'mdb-countdown';