Countdown Timer

by HugeHugh

HTML

<div class="progressBar">
    <div class="progress"></div>
</div>
<input type="button" id="startTimer" value="Start Timer">

CSS

.progressBar {
    width: 400px;
    height: 3px;
    background: #fcfcfc;
    border: 1px solid #fafafa;
}
.progressBar .progress {
    background: green;
    width: 100%;
    height: 3px;
    display: none;
}

JavaScript

$(function() {
    var timerDuration = 60 * 1000;
    $('#startTimer').click(function() {
        var startButton = $(this).prop("disabled", true);
        var bar = $('.progressBar .progress').css('width', '100%').show();
        bar.animate({width:"0%"}, timerDuration, 'linear', function() {
            startButton.prop("disabled", false);     
        });
    });
});