Animation Progress Bar

Base on bootstrap progress bar.

HTML

<div class="container">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 0%;"></div>
    </div>
</div>

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css');
 .container {
    margin-top: 30px;
    width: 400px;
}

JavaScript

var mins = 1; //change this to increase or decrease minutes
var tenMinsInMillis = 1000 * 60 * mins;
var finishedTS = (new Date()).getTime() + tenMinsInMillis;
var $bar = $('.bar');
var progressInterval = 1000;
var now, remaining, pWidth;

var setBar = function (pWidth) {
    $bar.width(pWidth + '%');
    $bar.text(Math.floor(pWidth) + "%");
};

var progress = setInterval(function () {
    now = (new Date()).getTime();
    remaining = finishedTS - now;
    pWidth = 100 - (remaining * 100 / tenMinsInMillis);
    
    setBar(pWidth);
    
    if (remaining < progressInterval) {
        clearInterval(progress);
        setTimeout(function () {
          setBar(100);
          $('.progress').removeClass('active');
        }, remaining);
    }
    
}, progressInterval);