Open In App

Bootstrap 5 Progress Animated stripes

Improve
Improve
Like Article
Like
Save
Share
Report

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=
          rel="stylesheet">
    <script src=
    </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=
          rel="stylesheet">
    <script src=
    </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



Last Updated : 27 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads