Countdown From A Specific Date - jQuery Loopcounter

Loopcounter is a tiny and easy-to-use countdown timer plugin that displays the remaining days/hours/minutes/seconds before a specific date.

Great for landing pages, coming soon pages,  product promotion pages, and much more.

How to use it:

1. Create Days, Hours, Minutes, and Seconds slots for the countdown timer and specify the date from which you'd like to countdown in the data-date attribute.

<div class="myCountdown" data-date="2022-12-24 23:59:59">
  <div><span class="counter-days"></span> Days</div>
  <div><span class="counter-hours"></span> Hours</div>
  <div><span class="counter-minutes"></span> Minutes</div>
  <div><span class="counter-seconds"></span> Seconds</div>
</div>

2. Include the Loopcounter plugin's script after jQuery.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="./js/loopcounter.js"></script>

3. Initialize the countdown timer and done.

$(function(){
  loopcounter('myCountdown');
});

4. The plugin also supports multiple instances at a time.

$(function(){
  loopcounter('myCountdown');
  loopcounter('myCountdown2');
  loopcounter('myCountdown3');
  ...
});

5. Style the countdown timer using your own CSS styles.

.counter-days {
  /* styles here */
}

.counter-hours {
  /* styles here */
}

.counter-minutes {
  /* styles here */
}

.counter-seconds {
  /* styles here */
}

---

This awesome jQuery plugin is developed by anik4e. For more Advanced Usages, please check the demo page or visit the official website.