Bootstrap Progress Bars


Progress Bars

When I first started working with Bootstrap, I was fascinated by the multitude of controls available. I love the idea of, for example, a progress bar. When I code in dBASE with long procedures, this is a particularly useful tool to show how far along we are.

One of the biggest frustrations I have found with Bootstrap is that the documentation shows you super-basic information, but does not show how to "hook" something up -- at least not easily.

The biggest issue with the way I am coding is that I needed PHP (the back-end software I work with to manipulate data and output the HTML for a page) to talk to JavaScript or more importantly to the progress bar itself.

If you go to the Bootstrap page that shows information about their progress bar tools [Bootstrap Progress bars], you will see that there are a wide range of progress bars based on appearance, but they don't really show you how to programmatically change the width option, which is how you define how far along a progress is.

Placing a Progress Bar on a Page

For the setup routine for my own CMS (the only place I chose to use the progress bar), I found after a lot of experimentation that once you have placed a progress bar on the page (see below), you have to then set appropriate values as you progress through whatever you're doing.

               <div class="progress">
                  <div id="InitProgress" name="InitProgress"
                     class="progress-bar progress-bar-success progress-bar-striped"
                     role="progressbar" aria-valuenow="0" aria-valuemin="0"
                     aria-valuemax="100" style="width: 0%">
                  </div>
               </div>
               <p id="ProgressText" name="ProgressText" style="text-align: center;">
                     <b><i>Initialize User Data</i></b>
               </p>
            

This provides a progress bar that looks like:

Initialize User Data

This is not very interesting looking, but that's because the style attribute is setting the width of the progress bar to 0%.

Using PHP and Javascript to Update Progress

What I found works after some trial and error (and a bit of cursing) is that with PHP you can stream out some Javascript code that will handle it:

               //set the width for the progress bar:
               echo "<script>document.getElementById('InitProgress').style.width='5%'&;lt;/script>";
               echo "<script>document.getElementById('ProgressText').innerHTML='<b><i>Old users data removed</i></b>'</script>";
            

This changes the progress bar to look like:

Old users data removed

Ultimately, as you progress through a large process, you will end up at 100%, and then you're done.

Process Complete

There are of course options with these. You can set different styles of progress bars by changing colors, by adding/removing classes. Here's a short breakdown of the classes, but you can see all the details and examples of what everything looks like on the Bootstrap site:

This is hardly a complete listing of all you can do with this. I really felt the most important part was showing you how to update the progress bar itself.

Misc. Notes

By default most or all of Bootstrap's controls assume the full width of whatever page they are displayed on or more importantly, the Bootstrap column they are contained in. If the progress bar is too wide for your taste, you can work with the [Bootstrap grid] to modify the width of just that portion of a page. If, for example, you wanted to set the progress bar to perhaps 50% of the width of the page, you would need to do something like the following. This uses the row class to break up the page into rows, and then uses the column class (col-md-6 -- half the width of a page, combined with col-md-offset-3 -- half of what is left of the page) to center it at half the width of a page. (You need to have a basic understanding of the grid system for Bootstrap ...)

               <div class="row">
                  <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">
                     <div class="progress">
                        <div id="InitProgress" name="InitProgress"
                             class="progress-bar progress-bar-success progress-bar-striped"
                             role="progressbar" aria-valuenow="0" aria-valuemin="0"
                             aria-valuemax="100" style="width: 75%">
                        </div>
                     </div>
                     <p id="ProgressText" name="ProgressText" style="text-align: center; margin-top: -20px;">
                        <b><i>3/4 Of the Way Done</i></b>
                     </p>
                  </div> <!-- / col -->
               </div> <!-- / row -->
            

(With all these nested div tags, note I often use comments to show the end of a div, so I don't get totally lost ... leaving off one end tag can completely mess up the display of a page.)

This would give you the following:

3/4 Of the Way Done

That's About It

Like anything, with Boostrap and the web in general, if you can think of something, the odds are someone else has already come up with a way of doing it. The hard part is figuring out how to make it work for you. Hopefully this gives some ideas and help with that.