Minimalist Countdown Timer Plugin With jQuery

A minimal, cross-browser jQuery plugin which helps you create an easy-to-style countdown timer without writing any JavaScript.

How to use it:

1. Just include the JavaScript countdown.js after jQuery JavaScript library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/countdown.js"></script>

2. Create a container element for the countdown timer and specify the date from which you wan to countdown in the data-date attribute as this:

<div class='countdown' data-date="2028-01-01"></div>

3. Set the end time in the data-time attribute:

<div class='countdown' data-date="2028-01-01" data-time="18:30"></div>

4. Apply the CSS styles to the countdown timer as per your needs.

.countdown {
  font-family: 'Roboto';
  text-transform: uppercase;
}

.countdown > div { display: inline-block; }

.countdown > div > span {
  display: block;
  text-align: center;
}

.countdown-container { margin: 0 3px; }

.countdown-container .countdown-heading {
  font-size: 11px;
  margin: 3px;
  color: #666
}

.countdown-container .countdown-value {
  font-size: 50px;
  background: #6273c9;
  padding: 10px;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.4)
}

Changelog:

2019-01-25

• Added End Time

2018-10-30

• Issue fix for multiple countdown boxes

---

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