如何使用 Twitter Bootstrap 和 Jquery 制作 Hipmunk 风格的进度条

Question

To my surprise, I'm not seeing much for this.

The bootstrap docs give plenty of options for displaying a progress bar, but no instructions for actually making it do something.

I'm writing a one page web app that'll ideally use a progress bar transition before switching to the hidden part of the page.

Here's the simplified html:

HTML

<div id="part1">
    <p>Sample App</p>
        <button class="analyze btn btn-primary">Analyze</button>
</div>

<div id="part2">
    <!-- Some html goes here -->
</div>

CSS

#part2 {
   display: none;
}

Jquery

$(".analyze").click(function() {
    $("#part1").hide();
    $("#part2").show();
});

This is very simple. What I'd like to do is make a progress bar that dynamically populates on $(".analyze").click and takes a fixed amount of time to complete before #part2 becomes visible using the bootstrap progress bar.

Something very similar to what hipmunk, or many of the other airline aggregator sites do.

Ideally this is compatible across most browsers and uses jquery since this is what I'm using to make most of the UI for my app.

Answer 1

You can make use of the JavaScript function setInterval to repeatedly run a function over and over again. So that is an easy way to change the width of something over a given amount of time.

HTML

<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>

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);
}

Then call it with this JavaScript:

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

fakeProgress($('#instance'), duration, onDone);

JSFiddle: https://jsfiddle.net/6ht5umxz/3/