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 =
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.
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:
References: https://getbootstrap.com/docs/5.0/components/progress/#animated-stripes
Last Updated :
27 Feb, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...