Bootstrap Buttons with Loading Progress Bars

  • Posted on: 16 November 2015
  • By: davis

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

To start, you'll need the following files:

progress_bar.css

progress_bar.js

In your header, you'll need to include the above Javascript file (adapted from http://tutorialzine.com/2013/10/buttons-built-in-progress-meters/)

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

<!-- jQuery --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  

<!-- Bootstrap CSS and JS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></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
</button>

Let's go ahead and initialize the button.

$('#progressBtn')
            .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