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" > w3wiki </ 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 = "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" > w3wiki </ 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
Contact Us