Minimalist Countdown Timer Plugin With jQuery

File Size: 4.06 KB
Views Total: 16587
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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)



  • Added End Time


  • 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.