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.

Edit in sandbox 
        
            
          <div data-mdb-countdown="31 December 2023 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>

Interval

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

Edit in sandbox 
        
            
          <div data-mdb-countdown="5 November 2022 12:35" data-mdb-countdown-interval="30">
            <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>

Label

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

Edit in sandbox 
        
            
          <div data-mdb-countdown="31 December 2023 23:59:59">
            <div class="countdown-unit countdown-days" data-mdb-countdown-label="days"></div>
            <div class="countdown-unit countdown-hours" data-mdb-countdown-label="hours"></div>
            <div class="countdown-unit countdown-minutes" data-mdb-countdown-label="minutes"></div>
            <div class="countdown-unit countdown-seconds" data-mdb-countdown-label="seconds"></div>
          </div>

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

Edit in sandbox 
        
            
          <div data-mdb-countdown="31 December 2023 23:59:59" data-mdb-countdown-separator=":">
            <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>

Styling

Countdown position

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

Edit in sandbox 
        
            
            <div data-mdb-countdown="31 December 2023 23:59:59" data-mdb-countdown-position="vertical">
              <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>

Label position

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

Edit in sandbox 
        
            
            <div data-mdb-countdown="31 December 2023 23:59:59" data-mdb-countdown-label-position="horizontal">
              <div class="countdown-unit countdown-days" data-mdb-countdown-label="d"></div>
              <div class="countdown-unit countdown-hours" data-mdb-countdown-label="h"></div>
              <div class="countdown-unit countdown-minutes" data-mdb-countdown-label="m"></div>
              <div class="countdown-unit countdown-seconds" data-mdb-countdown-label="s"></div>
            </div>

Text size

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

Edit in sandbox 
        
            
            <div data-mdb-countdown="31 December 2023 23:59:59" data-mdb-countdown-text-size="6rem">
              <div class="countdown-unit countdown-days" data-mdb-countdown-label="days"></div>
              <div class="countdown-unit countdown-hours" data-mdb-countdown-label="hours"></div>
              <div class="countdown-unit countdown-minutes" data-mdb-countdown-label="minutes"></div>
              <div class="countdown-unit countdown-seconds" data-mdb-countdown-label="seconds"></div>
            </div>

Custom classes

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

Edit in sandbox 
        
            
            <div
              data-mdb-countdown="31 December 2023 23:59:59"
              data-mdb-countdown-text-style="badge bg-primary"
              data-mdb-countdown-label-style="text-light bg-dark"
            >
              <div class="countdown-unit countdown-days" data-mdb-countdown-label="days"></div>
              <div class="countdown-unit countdown-hours" data-mdb-countdown-label="hours"></div>
              <div class="countdown-unit countdown-minutes" data-mdb-countdown-label="minutes"></div>
              <div class="countdown-unit countdown-seconds" data-mdb-countdown-label="seconds"></div>
            </div>

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

Edit in sandbox 
        
            
        <div data-mdb-countdown="31 December 2023 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

Edit in sandbox 
        
            
        <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.

Edit in sandbox 
        
            
        <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>
      
        
    
        
            
        $(document).ready(() => { 
          $('#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-countdown-label.

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)
Edit in sandbox 
        
            
        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.
Edit in sandbox 
        
            
          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:

Edit in sandbox 
        
            
        import Countdown from 'mdb-countdown';