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
Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.
Basic example
Create default Countdown by adding the data-mdb-countdown-init attribute to a container element and
and specifying the expiration date with
data-mdb-countdown attribute. Additionally, add the .countdown-unit class and
.countdown-* with the respective time unit to a child element, indicating which time units should be
displayed inside the Countdown.
<div data-mdb-countdown-init data-mdb-countdown="31 December 2024 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 an interval that resets the timer every time the initial countdown ends.
<div data-mdb-countdown-init 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 a label for each time unit by adding data-mdb-countdown-label with text of
your choice.
<div data-mdb-countdown-init data-mdb-countdown="31 December 2024 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.
<div data-mdb-countdown-init data-mdb-countdown="31 December 2024 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"
<div data-mdb-countdown-init data-mdb-countdown="31 December 2024 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"
<div data-mdb-countdown-init data-mdb-countdown="31 December 2024 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.
<div data-mdb-countdown-init data-mdb-countdown="31 December 2024 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
<div
data-mdb-countdown="31 December 2024 23:59:59"
data-mdb-countdown-text-style="badge bg-primary"
data-mdb-countdown-label-style="text-light bg-dark"
data-mdb-countdown-init
>
<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
Import
import Countdown from 'mdb-countdown';
@import '~mdb-countdown/css/countdown.min.css';
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.
Via data attributes
Using the Countdown plugin doesn't require any additional JavaScript code - simply add
data-mdb-countdown-init attribute to
container element with a Countdown expiration date value
and use other data attributes to set all options.
<div data-mdb-countdown-init 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
<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>
$(document).ready(() => {
$('#countdown-element').countdown();
});
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-, as in data-mdb-countdown="".
The unit and countdownLabel attributes should be pinned directly to the
.countdown-unit.
| Name | Type | Default | Description |
|---|---|---|---|
countdown
|
String | '' |
Initiates Countdown instance on element. Takes the value of the date to which the timer will be counting. |
countdownInterval
|
Number | 0 |
Sets interval in seconds that will reset timer after given amount of time after initial countdown ends. |
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. |
unit
|
String | |
Attached to children element defines time unit to be displayed on element. Possible
values:
days, hours, minutes, seconds.
|
countdownLabel
|
String | |
Attached to children element defines time unit label to be displayed on element. |
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...
})