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.
<!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:
Example 2: In this example, we will create an animated stripped progress bar with a secondary, warning, and primary background color.
<!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:
References: https://getbootstrap.com/docs/5.0/components/progress/#animated-stripes