Countdown

A simple and HTML agnostic date countdown plugin with different countdown options.

Official documentation

For more detailed information and examples, see the official documentation: jQuery Countdown documentation .

How to use?

To add hs.countdown.js in your page, wrap any block in a parent element with an ID or class and add the same ID or the class in the JS INIT function of the plugin, set the time data-end-date="" and data-*-format="".

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

                
                  <script src="../../assets/vendor/jquery.countdown.min.js"></script>
                
              

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

                
                  <script src="../../assets/js/helpers/hs.countdown.js"></script>
                
              

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                
                  <script>
                    $(document).on('ready', function () {
                      // initialization of countdowns
                      var countdowns = $.HSCore.components.HSCountdown.init('.js-countdown', {
                        yearsElSelector: '.js-cd-years',
                        monthsElSelector: '.js-cd-months',
                        daysElSelector: '.js-cd-days',
                        hoursElSelector: '.js-cd-hours',
                        minutesElSelector: '.js-cd-minutes',
                        secondsElSelector: '.js-cd-seconds'
                      });
                    });
                  </script>
                
              

Basic example

Years Months Days Hours Minutes Seconds
                      
                        <div class="js-countdown"
                                data-end-date="2020/11/30"
                                data-years-format="%Y"
                                data-months-format="%M"
                                data-days-format="%D"
                                data-hours-format="%H"
                                data-minutes-format="%M"
                                data-seconds-format="%S">
                          <strong class="js-cd-years"></strong>
                          <span>Years</span>
                          <strong class="js-cd-months"></strong>
                          <span>Months</span>
                          <strong class="js-cd-days"></strong>
                          <span>Days</span>
                          <strong class="js-cd-hours"></strong>
                          <span>Hours</span>
                          <strong class="js-cd-minutes"></strong>
                          <span>Minutes</span>
                          <strong class="js-cd-seconds"></strong>
                          <span>Seconds</span>
                        </div>
                      
                    

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-start-date="".

Attribute Description

data-start-date

Date from which the time period will be calculated.

data-end-date

Date to which the time period will be calculated.

data-years-format

Display format for years.

data-months-format

Display format for months.

data-days-format

Display format for days.

data-hours-format

Display format for hours.

data-minutes-format

Display format for minutes.

data-seconds-format

Display format for seconds.

data-seconds-format

Activates the ability to add SVG-circles around the clock, minutes, seconds, etc.

data-circles-radius

Adds border-radius for SVG-circles, if data-circles-radius="" is set to true.

data-circles-stroke-width

Adds border-width for SVG-circles, if data-circles="" is set to true.

data-circles-fg-color

Adds fill color for SVG-circles, if data-circles="" is set to true.

data-circles-bg-color

Adds background color for SVG-circles, if data-circles="" is set to true.

data-circles-additional-text

Adds the postfix to the digital value, if data-circles="" is set to true.

data-circles-font-size

Adds font-size inside the SVG-circles, if data-circles="" is set to true.
Contact Us