This time I will share jQuery Plugin and tutorial about Animated Square Countdown Clock In jQuery, hope it will help you in programming stack.
This is a tiny jQuery plugin to create a pretty clean countdown clock with animated borders representing the remaining days, hours, minutes, and seconds.
How to use it:
1. Link to the required JavaScript and CSS files as follows:
1 |
< link rel = "stylesheet" href = "/path/to/squareCountDownClock.css" /> |
2 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
3 |
< script src = "/path/to/squareCountDownClock.js" ></ script > |
2. Create a placeholder for the countdown clock.
3. Initialize the countdown clock and specify the datetime you’d like to countdown to.
1 |
const myClock = $( '#app' ).squareCountDownClock({ |
2 |
countdownDate: 'Dec 24, 2020 15:37:25' , |
4. Customize the border colors with the following options.
1 |
const myClock = $( '#app' ).squareCountDownClock({ |
2 |
countdownDate: 'Dec 24, 2020 15:37:25' , |
5 |
innerLabelColor: '#fff' |
5. Start the countdown clock. That’s it.