How To Make a Hipmunk Style Progress Bar with Twitter Bootstrap and Jquery

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.

if you're making the request to the backend with an ajax call you can get the percentage the content has been loaded and animate the width of the bar with css. $('.analyze').css('width', percentage). checkout http://stackoverflow.com/questions/76976/how-to-get-progress-from-xmlhttprequest — plondon, Jun 13 '15 at 22:30
@plondon - thank you for this insight, but there is no backend. It's 1 page with javascript. — Jonathan Bechtel, Jun 13 '15 at 22:57

Cymen · Accepted Answer · 2015-06-14T01:37:09.230

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/

@JonathanBechtel Is this what you're looking for? This is the typical way fake progress bars are done. You could also use a CSS transition for a specific class and add that class to the progress bar to do the transition. But it might not be as compatible as the JS solution. — Cymen, Jun 14 '15 at 01:38

How To Make a Hipmunk Style Progress Bar with Twitter Bootstrap and Jquery

1 Answers1