Countdown

Countdown is a JavaScript plugin to easily create countdowns and counters.

Autostarting Countdowns

Countdowns can be any size. Options can be set through data-attributes or by an options object passed to the constructor.

With data-attributes:

<div class="countdown" 
   data-digits="10" 
   data-number="12345678" 
   data-duration="20000000" 
   data-animate-to="0"></div>
<script>
$('.countdown').countdown();
</script>

Or with object in constructor:

<div class="countdown"></div>
<script>
$('.countdown').countdown({
    digits: 10,
    number: 12345678,
    duration: 20000000,
    animateTo: 0
});
</script>

Manual starting Countdowns

Absolute values

Click to animate the Countdown to 500,1000 or 1500.

$('a').on('click', function(){
    $('.countdown').countdown('animateTo', 0);
});

Relative values

Click to add 1234 to or substract 1234 from the countdown.

$('a').on('click', function(){
    $('.countdown').countdown('animateTo', '+1234');
});

Countdown with callback

$('.countdown').countdown().on('countdown:finished', function(event, data){
    var _this = this;
    setTimeout(function(){
        // Pause for 1 second and then revert to previous value
        $(_this).countdown('animateTo', data.old_value);
    }, 1000);
});

Countdown with custom display

Customizing the looks of Countdown is very easy, just use CSS.

.countdown{
    height: 70px;
}
.countdown .digit{
    height: 70px;
    width: 70px;
    font-family: 'Courier New', Courier;
    font-size: 70px;
    line-height: 74px;
    border-radius: 10px;
    background: #a90329;
    background: -webkit-linear-gradient(top, 
            #a90329 0%, 
            #a90329 53%, 
            #8f0222 53%, 
            #6d0019 100%);
}

Countdown Credits

• Built by Fetch!.
• Concept and development by Koen Punt.