The Bootstrap 5 Progress is used to show the progress of a task to the user. A progress bar displays how much your process progressed or is completed and left. We can use background utility classes to change the appearance of progress bars.
Prerequisite: Bootstrap 5 Progress component to create, stack, animate progress bars and place text labels over them.
Bootstrap 5 Progress Backgrounds Class: There is no individual color for this, we can use Bootstrap 5 Background Color classes to color the progress bars.
Syntax:
<div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: x%" aria-valuenow="..." aria-valuemin="..." aria-valuemax="..."> </div> </div>
Example 1: In this example, we set different informative background colors for the progress components.
<!DOCTYPE html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< div class = "text-center" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 > Bootstrap 5 progress background</ h3 >
</ div >
< div >
< div class = "progress mb-3 mt-4" >
< div class = "progress-bar bg-primary" role = "progressbar"
style = "width:25%" aria-valuenow = "30"
aria-valuemin = "0" aria-valuemax = "100" >
</ div >
</ div >
< div class = "progress mb-3 mt-4" >
< div class = "progress-bar bg-secondary" role = "progressbar"
style = "width: 35%" aria-valuenow = "30"
aria-valuemin = "0" aria-valuemax = "100" >
</ div >
</ div >
< div class = "progress mb-3" >
< div class = "progress-bar bg-success" role = "progressbar"
style = "width: 45%" aria-valuenow = "45"
aria-valuemin = "0" aria-valuemax = "100" >
</ div >
</ div >
< div class = "progress mb-3 mt-4" >
< div class = "progress-bar bg-warning" role = "progressbar"
style = "width:55%" aria-valuenow = "30"
aria-valuemin = "0" aria-valuemax = "100" >
</ div >
</ div >
< div class = "progress mb-3" >
< div class = "progress-bar bg-info" role = "progressbar"
style = "width: 65%" aria-valuenow = "60"
aria-valuemin = "0" aria-valuemax = "100" >
</ div >
</ div >
< div class = "progress mb-3" >
< div class = "progress-bar bg-danger" role = "progressbar"
style = "width: 90%" aria-valuenow = "90"
aria-valuemin = "0" aria-valuemax = "100" >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we set the progress bars with light, dark, transparent, and white colors.
<!DOCTYPE html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< div class = "text-center" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 >Bootstrap 5 Progress Backgrounds</ h3 >
</ div >
< div class = "progress mb-3 mt-4" >
< div class = "progress-bar bg-light" role = "progressbar"
style = "width: 30%" aria-valuenow = "30" aria-valuemin = "0"
aria-valuemax = "100" >
</ div >
</ div >
< div class = "progress mb-3 mt-4" >
< div class = "progress-bar bg-dark" role = "progressbar"
style = "width: 40%" aria-valuenow = "40" aria-valuemin = "0"
aria-valuemax = "100" >
</ div >
</ div >
< div class = "progress mb-3" >
< div class = "progress-bar bg-white" role = "progressbar"
style = "width: 50%" aria-valuenow = "50" aria-valuemin = "0"
aria-valuemax = "100" >
</ div >
</ div >
< div class = "progress mb-3" >
< div class = "progress-bar bg-transparent" role = "progressbar"
style = "width: 60%" aria-valuenow = "60" aria-valuemin = "0"
aria-valuemax = "100" >
</ div >
</ div >
< div class = "progress mb-3" >
< div class = "progress-bar bg-body" role = "progressbar"
style = "width: 90%" aria-valuenow = "100" aria-valuemin = "0"
aria-valuemax = "100" >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/progress/#backgrounds