Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div id="instance" class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    <span class="sr-only">0% Complete</span>
  </div>
</div>

<div class="show-on-done hidden">here is some other stuff</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

JavaScript

function fakeProgress(container, durationInMs, onDone) {
    var intervalInMS = 200;
    var doneDelay = intervalInMS * 2;
    var bar = container.find('.progress-bar');
    var srOnly = bar.find('.sr-only');
    var percent = 0;
    
    var interval = setInterval(function updateBar() {
        percent += 100 * (intervalInMS/durationInMs);
        bar.css({width: percent + '%'});
        bar['aria-valuenow'] = percent;
        srOnly.text(percent + '% Complete');
        
        if (percent >= 100) {
            clearInterval(interval);
            setTimeout(function() {
                if (typeof onDone === 'function') {
                    onDone();
                }
            }, doneDelay);
        }
    }, intervalInMS);
}

var duration = 1000;  // in milliseconds
function onDone() {
    $('.show-on-done').removeClass('hidden');
}
                               
fakeProgress($('#instance'), duration, onDone);