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