Progress within time using animation

by mrivasa

HTML

<div class='container'>
    <div class='progress-bar'>&nbsp;</div>
    <div class='counter'>1</div>
</div>

CSS

.progress-bar {
    height: 3px;
    background-color: red;
    box-shadow: 1px 1px 5px 0 #808080;
}
.container {
    width: 100%
}

JavaScript

var counter = 1;
var duration = 5000;
var progressWidth = $('.container').width();

function UpdateCount() {
    $('.progress-bar').css('width', 0).animate({
        width: progressWidth,
    }, duration, 'linear', function () {
        counter += 1;
        if (counter <= 5) {
            $('.counter').html(counter);
            UpdateCount();
        } else {
            alert('All done!');
        }
    });
}

UpdateCount();