O'Reilly logo

Bootstrap for Rails by Syed Fazle Rahman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a progress bar

Progress bars are essential to show the progress of an action to the users. You can create attractive progress bars easily using Bootstrap's markup.

Here's the markup for a basic progress bar:

<div class="progress">
  <div class="progress-bar" style="width: 60%;"></div>
</div>

The progress bar should be wrapped inside a div element with the .progress class. This div element behaves as a container for the progress bar. The actual progress is shown using a child div element with the .progress-bar class. You can write a JavaScript code to change the CSS width of this element to see the transition of the progress bar.

The preceding progress bar looks like the following in a browser:

To add a label to the progress bar, you can add ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required