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> ...