Bootstrap Buttons with Loading Progress Bars

20 Nov 2015

Here’s how to add loading bars to bootstrap buttons.

To start, you’ll need the following files:



In your header, you’ll need to include the above Javascript file (adapted from here)

You’ll also need jQuery and Bootstrap, of course.

<!-- jQuery -->
<script src=""></script>

<!-- Bootstrap CSS and JS -->
<link href="" rel="stylesheet" />
<script src=""></script>

<!-- Progress Bar CSS and JS -->
<link href="css/progress_bar.css" rel="stylesheet" />
<script src="js/progress_bar.js"></script>

Create a Bootstrap button in your HTML. We’ll attach a loading class to this so we can manipulate it in Javascript later.

<button class="btn btn-default btn-md progress-button" type="button" id="progressBtn">
Show Progress

Let’s go ahead and initialize the button.

            .progressInitialize() //initialize the progress-meter code
            .blur(); //remove focus from the button.

Now, here’s a real-life example of how to use this. When we call the function .progressIncrement() on $(‘#progressBtn’), we’ll specify an integer (which represents a percentage) to increment the progress by.

For example, .progressIncrement(50) would halfway-fill the progress bar.

Let’s try a simple loop.

var numberOfTries = 15;

/* Run a loop, incrementing the progress towards 100.
 * This loop will proportionally increment the request
 * (you can change the numberOfTries to anything less than 100,
 * and it'll do the math for you to ensure a smooth loading bar)
for(var i = 0; i < numberOfTries; i++){

    $('#progressBtn').progressIncrement(100 / (numberOfTries - 1)); //update progress bar by this much.. 100/15 = 6.66..


$('#progressBtn').progressFinish(); after the loop is done, resets the progress function for its next use