Fork me on GitHub

Project Notes

Progress Bars with Bootstrap

demo_in_progress

Notes

Bootstrap includes a Progress Bar component.

Styling follows bootstrap conventions of course, making it super-easy to drop a progress bar on a page:

  • Contextual alternative styling: success, info, warning, danger
  • Striped - gradient to create a striped effect
  • Animated Striped - animates the gradient striped effect
  • Stacked - place multiple bars into the same .progress container to stack them

The .progress-bar is contained within a .progress element:

<div class="progress" id="myProgressbar" >
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    0%
  </div>
</div>

Note that this does not use the HTML5 progress component. It is possible to use the HTML5 element <progress class="progress-bar ...></progress> however this breaks the bootstrap styling - it still works, but without the flair.

Animating the Progress Bar

Styling alone simply displays a progress bar at a given % complete.

The html5 spec does not define any direct animation support for the <progress> element.

Some Javascript is required to activate the progress bar for count-down or completion effects.

Strangely(?), there’s no javascript support shipped in Bootstrap. But adding it is very straight-forward. And how you add it depends very much on what you want the progress bar to indicate.

Animation Options

Updating the progress bar simply requires setting the width:

$('[role="progressbar"]').css('width', '75%')

For accessibility, it is good practice to also update the ARIA valuenow:

$('[role="progressbar"]').attr('aria-valuenow', 75);

And to display the percent complete (or other info) in the bar as it changes, update the text:

$('[role="progressbar"]').text(current_percent+ '%');

NB: if there is no text on the bar, it may be appropriate to include a screen-reader element instead:

$('[role="progressbar"]').html('<span class="sr-only">75% Complete</span>')

Bootstrap includes a default css transition (0.6 seconds) that will animate the change.

But if updates are emitted too fast, the bar will increasingly lag the desired value. It will catch up eventually, but can make for some unexpected animation sequences.

For progress updates that are not measuring time (e.g. sales, health, ammo), then a good css transition setting and Javascript that updates the progress bar position as required is probably the best approach.

Using setTimeout

If the intention is to use the progress bar to measure the passage of time, the obvious answer is a conventional setTimeout recursive function.

Most examples found on the net use this technique.

There’s a bootstrap-progressbar library available that adds progressbar interactions for twitter bootstrap 2 & 3. It uses the setTimeout technique.

Depending on the speed of progress, it is probably desirable to override the default bootstrap transition on .progress-bar.

The example in example.html includes a setTimeout example.

  • it implements a 0-100% timer over a pre-determined time (5 seconds).
  • it uses a standard recursive setTimeout pattern is used to update the progress bar value accordingly.
  • it sets a shorter css transition time to create a more appropriate yet smooth animation.

Using jQuery.animate

If the intention is to use the progress bar to measure the passage of time, another option is jQuery.animate.

This simplifies the animation task, as there’s no need to ensure the css transition matches the rate of animation.

For time-based effects, I think I prefer this technique.

The Demo

The example in example.html is an adaptation of a dynamic progress bar example by @jbeurel. It is extended to demonstrate:

  • animation with setTimeout
  • animation with jQuery.animate
  • fiddling css transition to allow immiedate updates yet smooth setTimeout animation

Run the demo live

In the HTML, action are hooked to a button:

  • where data-duration is the time in seconds to animate over
  • and data-method selects the animation technique
<button class="btn btn-primary" data-toggle="progressbar" data-target="#myProgressbar" data-duration="5" data-method="animateWithJquery">
  Start a 5 second timer (jQuery.animate)
</button>

It can also be exercised in Javascript:

$('#myProgressbar').progressbar("reset") // reset to 0%
$('#myProgressbar').progressbar("update", 65) // set 65%
$('#myProgressbar').progressbar("animateWithJquery", 15) // 15 second 0-100% animation with jQuery.animate
$('#myProgressbar').progressbar("animateWithTimeouts", 10) // 10 second 0-100% animation with setTimeout

Credits and References

About LCK#40 Javascript
Project Source on GitHub Return to the Project Catalog

This page is a web-friendly rendering of my project notes shared in the LittleCodingKata GitHub repository.

LittleCodingKata is my collection of programming exercises, research and code toys broadly spanning things that relate to programming and software development (languages, frameworks and tools).

These range from the trivial to the complex and serious. Many are inspired by existing work and I'll note credits and references where applicable. The focus is quite scattered, as I variously work on things new and important in the moment, or go back to revisit things from the past.

This is primarily a personal collection for my own edification and learning, but anyone who stumbles by is welcome to borrow, steal or reference the work here. And if you spot errors or issues I'd really appreciate some feedback - create an issue, send me an email or even send a pull-request.