Bootstrap Progress bar

Different styles of bootstrap progress bar code

A progress bar is used to display the progress of a process. A progress bar displays how much of the process is completed and how much is left.

Progress bars use CSS3 transitions and animations to achieve some of their effects.

<div class=”progress”>

  <div class=”progress-bar” style=”width:x%”></div>

<div>

HTML

<div class="bg-white mb-4">
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div> 
</div>
<div class="bg-white mb-4"> 
<div class="progress">
<div class="progress-bar bg-success" style="width:70%">70%</div>
</div>
</div>
<div class="bg-white mb-4">  
<!-- Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
</div>
<div class="bg-white mb-4"> 
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div>
</div>
<div class="bg-white mb-4"> 
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped" style="width:40%"></div>
</div>
</div>
<div class="bg-white mb-4"> 
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:98%">98%</div>
</div>
</div>	
<div class="bg-white mb-4"> 
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
</div>

CSS

Bootstrap CSS