Progress bars can be used for showing the progress of a task or action to the users. Bootstrap provides several types of progress bars. To create a basic progress bar −
Add a <div>
with a class of .progress
.
Next, inside the above <div>
, add an empty <div>
with a class of .progress-bar
.
Add a style attribute with the width expressed as a percentage. Say for example, style = "60%"; indicates that the progress bar was at 60%.
Example
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width:60%">
</div>
</div>
Preview