Progress Bars
Progress Bars
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->
Progress Bar Animations
Using animate.css you can add animations using utility class, like animate__animated animate__fadeInLeft followed by another utility class which is created to order the animations, they are from .first to .tenth or you can use aos.css to animate progress-bars, aos.css will start the animation when entering the view-port. In the below example we show both use-cases:
animate.css 25%
aos.css 50%
<div class="progress">
<div class="progress-bar bg-primary animate__animated animate__fadeInLeft first" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-aos="slide-right"></div>
</div><!-- / progress -->
<p class="progress-title fs-12">aos.css <span class="pull-right">50%</span></p>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-aos="slide-right" data-aos-delay="1000"></div>
</div><!-- / progress -->
Progress Bar Colors
Add .bg-*color to .progress-bar to change the background-color of the progress-bar.
Dark 40%
Success 55%
Info 70%
Warning 85%
Danger 100%
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->
<p class="progress-title fs-12">Dark <span class="pull-right">40%</span></p>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->
<p class="progress-title fs-12">Success <span class="pull-right">55%</span></p>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->
<p class="progress-title fs-12">Info <span class="pull-right">70%</span></p>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->
<p class="progress-title fs-12">Warning <span class="pull-right">85%</span></p>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->
<p class="progress-title fs-12">Danger <span class="pull-right">100%</span></p>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->
Progress Labels
Add labels to your progress bars by placing text within the .progress-bar. We only set a height value on the .progress, so if you change that value the inner ..progress-bar will automatically resize accordingly.
<div class="progress" style="height: 22px;">
<div class="progress-bar" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">33%</div>
</div><!-- / progress -->
Multiple Bars
Include multiple progress bars in a progress component if you need.
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div><!-- / progress -->