Bootstrap 5 Progress Animated stripes

Bootstrap 5 Progress Animated stripes are used to make the stripes progress bar animated. To make a progress bar you need to use the Progress bar classes and to make it striped use the Progress Bar Striped classes.

Pre-requisite: Bootstrap 5 Progress and Bootstrap 5 Striped Progress Bars.

Bootstrap 5 Progress Animated stripes Class:

• progress-bar-animated: This class used to animate the stripes right to left via CSS3 animations.

Syntax:

<div class="progress">
 <div class="progress-bar progress-bar-striped progress-bar-animated"
 role="progressbar" aria-valuenow= "" aria-valuemin=""
 aria-valuemax="" style= "width: ">
 </div>
</div>

Example 1: In this example, we will create 2 animated stripped progress bars & 1 non-animated progress bar so you can differentiate between the animated and no-animated progress bars.

Output:

👁 Bootstrap 5 Progress Animated stripes

Example 2: In this example, we will create an animated stripped progress bar with a secondary, warning, and primary background color.

Output:

👁 Bootstrap 5 Progress Animated stripes

References: https://getbootstrap.com/docs/5.0/components/progress/#animated-stripes