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.
Bootstrap provides a handful of utilities for setting width. Depending on your needs, these may help with quickly configuring progress.
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%
<p class="progress-title fs-12">animate.css <span class="pull-right">25%</span></p>
<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 -->Using .bg-* utility classes on progress-bars you can change their colors, see the below example where we are using the most common background-colors:
Primary 25%
Dark 40%
Success 55%
Info 70%
Warning 85%
Danger 100%
<p class="progress-title fs-12">Primary <span class="pull-right">25%</span></p>
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" data-aos="slide-right"></div>
</div><!-- / progress -->