animated square countdown - Free Download Animated Square Countdown Clock In jQuery

Free Download Animated Square Countdown Clock In jQuery

Posted on

This time I will share jQuery Plugin and tutorial about Animated Square Countdown Clock In jQuery, hope it will help you in programming stack.

animated square countdown - Free Download Animated Square Countdown Clock In jQuery
File Size: 5.84 KB
Views Total: 1448
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

1 <div id="app"></div>

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',
3 })

4. Customize the border colors with the following options.

1 const myClock = $('#app').squareCountDownClock({
2       countdownDate: 'Dec 24, 2020 15:37:25',
3       topColor: 'orange',
4       bottomColor: null,
5       innerLabelColor: '#fff'
6 })

5. Start the countdown clock. That’s it.

1 myClock.startTimer();