Progress bars are a metaphor used with traditional desktop as well as web development to provide visual feedback to a user on the progress of a task or action. Bootstrap provides a number of differently styled progress bars.
The basic Bootstrap progress bar displays a plain blue-colored progress bar. Adding a <span>
element with a class name of sr-only
is good practice in order to allow screen readers to read the progress percentage. The following markup generates a basic progress bar with a heading:
<h4>Basic Progressbar</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> <span class="sr-only">80% Complete</span> </div> </div>
The result of this markup is shown in the following screenshot:
You can also display an inline label for the progress bar by adding text inside its <div>
element...