Countdown

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

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

<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>
  <strong class="js-cd-months"></strong>
  <strong class="js-cd-days"></strong>
  <strong class="js-cd-hours"></strong>
  <strong class="js-cd-minutes"></strong>
  <strong class="js-cd-seconds"></strong>
</div>

Examples

HTML:

Days

Hours

Mins

Secs

<div class="js-countdown row"
     data-end-date="2020/11/30"
     data-month-format="%m"
     data-days-format="%D"
     data-hours-format="%H"
     data-minutes-format="%M"
     data-seconds-format="%S">
  <div class="col-6 col-sm-3 mb-7 mb-sm-0">
    <span class="js-cd-days d-block display-4 text-primary font-weight-medium"></span>
    <span class="d-block h5 font-weight-normal mb-0">Days</span>
  </div>
  <div class="col-6 col-sm-3 mb-7 mb-sm-0">
    <span class="js-cd-hours d-block display-4 text-primary font-weight-medium"></span>
    <span class="d-block h5 font-weight-normal mb-0">Hours</span>
  </div>
  <div class="col-6 col-sm-3">
    <span class="js-cd-minutes d-block display-4 text-primary font-weight-medium"></span>
    <span class="d-block h5 font-weight-normal mb-0">Mins</span>
  </div>
  <div class="col-6 col-sm-3">
    <span class="js-cd-seconds d-block display-4 text-primary font-weight-medium"></span>
    <span class="d-block h5 font-weight-normal mb-0">Secs</span>
  </div>
</div>

JS library and initialization:

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/jquery.countdown.min.js"></script>

<!-- JS Space -->
<script src="../../assets/js/helpers/hs.countdown.js"></script>

<!-- JS Plugins Init. -->
<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>

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`.