Bootstrap 4 | Progress Bars
A progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left. You can add a progress bar on a web page using predefined bootstrap classes. Bootstrap provides many types of progress bars.
Syntax:
<div class="progress"> <div class="progress-bar" style="width:x%"></div> <div>
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap Progress Bar</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body > < h1 style = "color:green;text-align:center;" > GeeksforGeeks </ h1 > < div class = "container" > < div class = "progress" > < div class = "progress-bar" style = "width:80%" > </ div > </ div > </ div > </ body > </ html > |
Output:
Height of Progress Bar: Use CSS property to change the height of progress bar. The default height of progress is 16px. The height of progress and progress-bar container must be the same.
Syntax:
<div class="progress" style="height:30px;"> <div class="progress-bar" style="width:x%";height30px;></div> <div>
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap Progress Bar</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body > < h1 style = "color:green;text-align:center;" > GeeksforGeeks </ h1 > < div class = "container" > < div class = "progress" style = "height:30px;" > < div class = "progress-bar" style = "width:80%;height:30px;" > </ div > </ div > </ div > </ body > </ html > |
Output:
Labeled Progress Bar: The labeled progress bar is used to display the text inside the progress bar to show the task completion percentage.
Syntax:
<div class="progress"> <div class="progress-bar" style="width:x%">x%</div> <div>
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap Progress Bar</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < div class = "container" > < div class = "progress" > < div class = "progress-bar" style = "width:80%;" > 80% </ div > </ div > </ div > </ body > </ html > |
Output:
Colored Progress Bars: Use Bootstrap 4 contextual background classes to set the color of progress bar. The default color of the progress bar is blue.
Syntax:
<div class="progress"> <div class="progress-bar bg-*" style="width:x%">x%</div> <div>
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap Progress Bar</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < div class = "container" > < div class = "progress" > < div class = "progress-bar" style = "width:50%;" > 50% </ div > </ div >< br > < div class = "progress" > < div class = "progress-bar bg-success" style = "width:90%;" > 90% </ div > </ div >< br > < div class = "progress" > < div class = "progress-bar bg-warning" style = "width:30%;" > 30% </ div > </ div >< br > < div class = "progress" > < div class = "progress-bar bg-danger" style = "width:10%;" > 10% </ div > </ div >< br > < div class = "progress" > < div class = "progress-bar bg-info" style = "width:70%;" > 70% </ div > </ div >< br > </ div > </ body > </ html > |
Output:
Stripped Progress Bars: The .progress-bar-stripped class is used to add stripes to the progress bars. Use the combination of .progress-bar and .progress-bar-stripped classes to create stripped progress bar. Use Bootstrap 4 contextual background classes to set the color of progress bar.
Syntax:
<div class="progress"> <div class="progress-bar progress-bar-stripped" style="width:x%"> x% </div> <div>
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap Progress Bar</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < div class = "container" > < div class = "progress" > < div class = "progress-bar progress-bar-stripped" style = "width:50%;" > 50% </ div > </ div >< br > < div class = "progress" > < div class = "progress-bar bg-success progress-bar-stripped" style = "width:90%;" > 90% </ div > </ div >< br > < div class = "progress" > < div class = "progress-bar bg-warning progress-bar-stripped" style = "width:30%;" > 30% </ div > </ div >< br > < div class = "progress" > < div class = "progress-bar bg-danger progress-bar-stripped" style = "width:10%;" > 10% </ div > </ div >< br > < div class = "progress" > < div class = "progress-bar bg-info progress-bar-stripped" style = "width:70%;" > 70% </ div > </ div >< br > </ div > </ body > </ html > |
Output:
Animated Progress Bar: The .progress-bar-animated class is used to create an animated progress bar. Use the combination of .progress-bar, progress-bar-stripped and progress-bar-animated to create an animated progress bar.
Syntax:
<div class="progress"> <div class="progress-bar progress-bar-stripped progress-bar-animated" style="width:x%"> x% </div> <div>
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap Progress Bar</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < div class = "container" > < div class = "progress" > < div class="progress-bar progress-bar-stripped progress-bar-animated" style = "width:50%;" > 50% </ div > </ div >< br > < div class = "progress" > < div class="progress-bar bg-success progress-bar-stripped progress-bar-animated" style = "width:90%;" > 90% </ div > </ div >< br > < div class = "progress" > < div class="progress-bar bg-warning progress-bar-stripped progress-bar-animated" style = "width:30%;" > 30% </ div > </ div >< br > < div class = "progress" > < div class="progress-bar bg-danger progress-bar-stripped progress-bar-animated" style = "width:10%;" > 10% </ div > </ div >< br > < div class = "progress" > < div class="progress-bar bg-info progress-bar-stripped progress-bar-animated" style = "width:70%;" > 70% </ div > </ div >< br > </ div > </ body > </ html > |
Output:
Multiple Progress Bars: Multiple progress bars can be stacked to display different colored progress bars.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap Progress Bar</ title > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = < script src = </ script > < script src = </ script > < script src = </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksforGeeks </ h1 > < div class = "container" > < div class = "progress" > < div class = "progress-bar" style = "width:10%;" > 10% </ div > < div class = "progress-bar bg-success" style = "width:20%;" > 20% </ div > < div class = "progress-bar bg-warning" style = "width:30%;" > 30% </ div > < div class = "progress-bar bg-danger" style = "width:30%;" > 30% </ div > </ div > </ div > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...