This time I will share jQuery Plugin and tutorial about Countdown From A Specific Date – jQuery Loopcounter, hope it will help you in programming stack.
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.
1 |
<div class="myCountdown" data-date="2022-12-24 23:59:59"> |
2 |
<div><span class="counter-days"></span> Days</div> |
3 |
<div><span class="counter-hours"></span> Hours</div> |
4 |
<div><span class="counter-minutes"></span> Minutes</div> |
5 |
<div><span class="counter-seconds"></span> Seconds</div> |
2. Include the Loopcounter plugin’s script after jQuery.
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"> |
5 |
<script src="./js/loopcounter.js"></script> |
3. Initialize the countdown timer and done.
2 |
loopcounter('myCountdown'); |
4. The plugin also supports multiple instances at a time.
2 |
loopcounter('myCountdown'); |
3 |
loopcounter('myCountdown2'); |
4 |
loopcounter('myCountdown3'); |
5. Style the countdown timer using your own CSS styles.
This awesome jQuery plugin is developed by anik4e. For more Advanced Usages, please check the demo page or visit the official website.
