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 with MDBCountdown and MDBCountdownUnit components.
MDBCountdown uses slot properties to expose units value to its children elements.
<template>
<MDBCountdown
countdown="31 December 2023 23:59:59"
v-slot="{ seconds, minutes, hours,days}"
>
<MDBCountdownUnit :unit="days" />
<MDBCountdownUnit :unit="hours" />
<MDBCountdownUnit :unit="minutes" />
<MDBCountdownUnit :unit="seconds" />
</MDBCountdown>
</template>
<script>
import {
MDBCountdown,
MDBCountdownUnit
} from "mdb-vue-countdown";
export default {
components: {
MDBCountdown,
MDBCountdownUnit
},
};
</script>
<script setup lang="ts">
import {
MDBCountdown,
MDBCountdownUnit
} from "mdb-vue-countdown";
</script>
Interval
Create interval that will reset timer every time initial countdown ends.
<template>
<MDBCountdown
countdown="5 November 2022 12:35"
:interval="30"
v-slot="{ seconds, minutes, hours,days}"
>
<MDBCountdownUnit :unit="days" />
<MDBCountdownUnit :unit="hours" />
<MDBCountdownUnit :unit="minutes" />
<MDBCountdownUnit :unit="seconds" />
</MDBCountdown>
</template>
<script>
import {
MDBCountdown,
MDBCountdownUnit
} from "mdb-vue-countdown";
export default {
components: {
MDBCountdown,
MDBCountdownUnit
},
};
</script>
<script setup lang="ts">
import {
MDBCountdown,
MDBCountdownUnit
} from "mdb-vue-countdown";
</script>
Label
Create label for each time unit by adding label with a text of
your choice.
<template>
<MDBCountdown
countdown="31 December 2023 23:59:59"
v-slot="{ seconds, minutes, hours,days}"
>
<MDBCountdownUnit :unit="days" label="days" />
<MDBCountdownUnit :unit="hours" label="hours" />
<MDBCountdownUnit :unit="minutes" label="minutes" />
<MDBCountdownUnit :unit="seconds" label="seconds" />
</MDBCountdown>
</template>
<script>
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
export default {
components: {
MDBCountdown,
MDBCountdownUnit
},
};
</script>
<script setup lang="ts">
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
</script>
Separator
Add separator to a container element to insert separator
between each time unit.
Separator won't be visible for Countdown vertical position
<template>
<MDBCountdown
countdown="31 December 2023 23:59:59"
separator=":"
v-slot="{ seconds, minutes, hours,days}"
>
<MDBCountdownUnit :unit="days" label="days" />
<MDBCountdownUnit :unit="hours" label="hours" />
<MDBCountdownUnit :unit="minutes" label="minutes" />
<MDBCountdownUnit :unit="seconds" label="seconds" />
</MDBCountdown>
</template>
<script>
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
export default {
components: {
MDBCountdown,
MDBCountdownUnit
},
};
</script>
<script setup lang="ts">
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
</script>
Styling
Countdown position
Change default horizontal position of Countdown with
vertical property
<template>
<MDBCountdown
countdown="31 December 2023 23:59:59"
vertical
v-slot="{ seconds, minutes, hours,days}"
>
<MDBCountdownUnit :unit="days" label="days" />
<MDBCountdownUnit :unit="hours" label="hours" />
<MDBCountdownUnit :unit="minutes" label="minutes" />
<MDBCountdownUnit :unit="seconds" label="seconds" />
</MDBCountdown>
</template>
<script>
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
export default {
components: {
MDBCountdown,
MDBCountdownUnit
},
};
</script>
<script setup lang="ts">
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
</script>
Label position
Change default vertical position of Countdown label with
labelPosition="horizontal"
<template>
<MDBCountdown
countdown="31 December 2023 23:59:59"
v-slot="{ minutes, hours, days }"
labelPosition="horizontal"
>
<MDBCountdownUnit :unit="days" label="d" />
<MDBCountdownUnit :unit="hours" label="h" />
<MDBCountdownUnit :unit="minutes" label="m" />
</MDBCountdown>
</template>
<script>
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
export default {
components: {
MDBCountdown,
MDBCountdownUnit
},
};
</script>
<script setup lang="ts">
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
</script>
Text size
Change default time unit text size (4rem) with
textSize.
<template>
<MDBCountdown
countdown="31 December 2023 23:59:59"
v-slot="{ seconds, minutes, hours,days}"
textSize="6rem"
>
<MDBCountdownUnit :unit="days" label="days" />
<MDBCountdownUnit :unit="hours" label="hours" />
<MDBCountdownUnit :unit="minutes" label="minutes" />
<MDBCountdownUnit :unit="seconds" label="seconds" />
</MDBCountdown>
</template>
<script>
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
export default {
components: {
MDBCountdown,
MDBCountdownUnit
},
};
</script>
<script setup lang="ts">
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
</script>
Custom classes
Add custom classes to time unit value and label with
textStyle and
labelStyle
<template>
<MDBCountdown
countdown="31 December 2023 23:59:59"
v-slot="{ seconds, minutes, hours, days }"
textStyle="badge bg-primary rounded-0 rounded-top mx-0" labelStyle="text-light bg-dark"
>
<MDBCountdownUnit :unit="days" label="days" />
<MDBCountdownUnit :unit="hours" label="hours" />
<MDBCountdownUnit :unit="minutes" label="minutes" />
<MDBCountdownUnit :unit="seconds" label="seconds" />
</MDBCountdown>
</template>
<script>
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
export default {
components: {
MDBCountdown,
MDBCountdownUnit
},
};
</script>
<script setup lang="ts">
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
</script>
Slot props
With slot properties you can use our Countdown whatever you want. Add
custom property to disable default styling.
<template>
<MDBCountdown
countdown="31 December 2023 23:59:59"
separator=":"
v-slot="{ seconds, minutes, hours, days }"
custom
>
Time remaining to an event:
{{ days }} days,
{{ hours }} hours,
{{ minutes }} minutes,
{{ seconds }} seconds.
</MDBCountdown>
</template>
<script>
import { MDBCountdown } from "mdb-vue-countdown";
export default {
components: {
MDBCountdown,
},
};
</script>
<script setup lang="ts">
import { MDBCountdown } from "mdb-vue-countdown";
</script>
Countdown - API
Import
<script>
import {
MDBCountdown,
MDBCountdownUnit
} from "mdb-vue-countdown";
export default {
components: {
MDBCountdown,
MDBCountdownUnit
},
};
</script>
Properties
MDBCountdown
| Name | Type | Default | Description |
|---|---|---|---|
autostart
|
Boolean | true |
Automatically starts counting. |
countdown
|
String | Number | Date | - |
Value of the date to which the timer will be counting. |
custom
|
Boolean | false |
Disables default styling |
interval
|
Number | 0 |
Sets interval in seconds that will reset timer after given amount of time after initial countdown ends. |
labelPosition
|
String | 'vertical' |
Positions the label at the bottom or next to the corresponding time unit value. |
labelStyle
|
String | '' |
Adds custom styles to all labels. |
separator
|
String | '' |
Attached to container element defines separator used between each time unit value. Separator is not visible in vertical position of the Countdown element. |
tag
|
String | 'div' |
Default tag element for component wrapper |
textSize
|
String | '' |
Sets size of time unit text element. Text for labels in vertical label position is four times smaller than time unit text. |
textStyle
|
String | '' |
Adds custom styles to all time unit text elements. |
vertical
|
Boolean | false |
Positions Countdown element vertically. |
Slot properties
| Name | Type | Default | Description |
|---|---|---|---|
seconds
|
Number | |
Returns countdown seconds value |
minutes
|
Number | |
Returns countdown minutes value |
hours
|
Number | |
Returns countdown hours value |
days
|
Number | |
Returns countdown days value |
MDBCountdownUnit
| Name | Type | Default | Description |
|---|---|---|---|
label
|
String | '' |
Sets label for unti element |
tag
|
String | 'div' |
Default tag element for component wrapper |
unit
|
String | String | Number |
Defines time unit - based on MDBCountdown scoped slots |
Methods
| Name | Argument | Description |
|---|---|---|
stop
|
Stops the timer. | |
start
|
Starts stopped timer. | |
setCountdown
|
date | Dynamically sets new date to count to |
<template>
<MDBBtn color="primary" @click="countdownRef?.stop()">Stop countdown</MDBBtn>
<MDBCountdown
countdown="31 December 2023 23:59:59"
v-slot="{ seconds, minutes, hours, days }"
ref="countdownRef"
>
<MDBCountdownUnit :unit="days" />
<MDBCountdownUnit :unit="hours" />
<MDBCountdownUnit :unit="minutes" />
<MDBCountdownUnit :unit="seconds" />
</MDBCountdown>
</template>
<script>
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
import { MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBCountdown,
MDBCountdownUnit,
MDBBtn,
},
setup() {
const countdownRef = ref(null);
return {
countdownRef,
};
},
};
</script>
<script setup lang="ts">
import { MDBCountdown, MDBCountdownUnit } from "mdb-vue-countdown";
import { MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
const countdownRef = ref<InstanceType<typeof MDBCountdown> | null>(null);
</script>
Events
| Name | Description |
|---|---|
start
|
This event fires immediately when the countdown starts counting. |
stop
|
This event fires immediately when the countdown pauses counting. |
end
|
This event fires immediately when the countdown ends counting. |
<template>
<MDBCountdown countdown="31 December 2023 23:59:59" @start="doSomething" >...</MDBCountdown>
</template>