Easy to configure lightweight jQuery countdown timer plugin

by

In this tutorial I am going to share very compact easy to configure lightweight jQuery countdown timer plugin – downCount developed by sonnyt. downCount is very lightweight timer countdown plugin with basic features like custom alert text and timezone support. You can also append a callback function which is called when countdown finishes.
jquery-countdown-timer

Integrate downCount Countdown timer plugin

Libraries

Include jquery latest minified library after that add jquery.downCount.js on page.

HTML

Create a unordered list container for countdown timer which display days, hours, minutes and seconds.

    
        
  • 
            00
            
    days
    
        
    • 
        
  • .
    • 
        
  • 
            00
            
    hours
    
        
    • 
        
  • :
    • 
        
  • 
            00
            
    minutes
    
        
    • 
        
  • :
    • 
        
  • 
            00
            
    seconds
    
        
    •


CSS

Add CSS on page for styling your countdown timer.

ul.countdown {
                list-style: none;downCount
                margin: 75px 0;
                padding: 0;
                display: block;
                text-align: center;
            }
            ul.countdown li {
                display: inline-block;
            }
            ul.countdown li span {
                font-size: 80px;
                font-weight: 300;
                line-height: 80px;
            }
            ul.countdown li.seperator {
                font-size: 80px;
                line-height: 70px;
                vertical-align: top;
            }
            ul.countdown li p {
                color: #a7abb1;
                font-size: 14px;
            }


JS

Finally call plugin function on page and set countdown date with offset and callback countdown finish message.

See live demo and download source code.

DEMO | DOWNLOAD

Published by Rohit