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.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body>
    <div class="text-center m-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Progress Animated stripes</strong>
        <strong>Animated Striped Progress Bar</strong>
        <div class="progress">
            <div class="progress-bar 
                        progress-bar-striped 
                        progress-bar-animated"
                 aria-valuemin="0" 
                 aria-valuemax="100" 
                 style="width: 25%">
            </div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar 
                        progress-bar-striped 
                        progress-bar-animated bg-success"
                 aria-valuemin="0" 
                 aria-valuemax="100" 
                 style="width: 35%">
            </div>
        </div>
        <br>
        <strong>Simple Striped Progress Bar</strong>
        <div class="progress">
            <div class="progress-bar 
                        progress-bar-striped  
                        bg-info"
                 aria-valuemin="0"
                 aria-valuemax="100" 
                 style="width: 45%">
            </div>
        </div>

    </div>

</body>

</html>

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.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js">
    </script>
</head>

<body>
    <div class="text-center m-3">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <strong>Bootstrap 5 Progress Animated stripes</strong>
        <br>
        <div class="progress">
            <div class="progress-bar progress-bar-striped  
                        progress-bar-animated bg-secondary" 
                 aria-valuemin="0" 
                 aria-valuemax="100" 
                 style="width: 25%">
            </div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar progress-bar-striped 
                        progress-bar-animated bg-warning" 
                 aria-valuemin="0" 
                 aria-valuemax="100"
                 style="width: 35%">
            </div>
        </div>
        <br>
        <div class="progress">
            <div class="progress-bar progress-bar-striped  
                        progress-bar-animated bg-primary" 
                 aria-valuemin="0" 
                 aria-valuemax="100" 
                 style="width: 45%">
            </div>
        </div>

    </div>

</body>

</html>

Output:

Bootstrap 5 Progress Animated stripes

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

Bootstrap 5 Progress Animated stripes

Explore