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 2022 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>

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>

Label

Create label for each time unit by adding label with a text of your choice. 

        
            
              <template>
                <MDBCountdown 
                  countdown="31 December 2022 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>

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 2022 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>

Styling

Countdown position

Change default horizontal position of Countdown with vertical property 

        
            
              <template>
                <MDBCountdown 
                  countdown="31 December 2022 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>

Label position

Change default vertical position of Countdown label with labelPosition="horizontal" 

        
            
            <template>
              <MDBCountdown 
                countdown="31 December 2022 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>

Text size

Change default time unit text size (4rem) with textSize. 

        
            
              <template>
                <MDBCountdown 
                  countdown="31 December 2022 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>

Custom classes

Add custom classes to time unit value and label with textStyle and labelStyle 

        
            
              <template>
                <MDBCountdown 
                  countdown="31 December 2022 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>

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 2022 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>

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

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.