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:
<!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:
<!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:
<!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:
<!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:
Striped Progress Bars: The .progress-bar-striped class is used to add stripes to the progress bars. Use the combination of .progress-bar and .progress-bar-striped classes to create striped 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-striped" style="width:x%">
x%
</div>
<div>
Example:
<!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-striped" style="width:50%;">50%</div> </div><br> <div class="progress"> <div class="progress-bar bg-success progress-bar-striped" style="width:90%;">90%</div> </div><br> <div class="progress"> <div class="progress-bar bg-warning progress-bar-striped" style="width:30%;">30%</div> </div><br> <div class="progress"> <div class="progress-bar bg-danger progress-bar-striped" style="width:10%;">10%</div> </div><br> <div class="progress"> <div class="progress-bar bg-info progress-bar-striped" 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-striped and progress-bar-animated to create an animated progress bar.
Syntax:
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:x%">
x%
</div>
<div>
Example:
<!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-striped progress-bar-animated" style="width:50%;">50%</div> </div><br> <div class="progress"> <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:90%;">90%</div> </div><br> <div class="progress"> <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:30%;">30%</div> </div><br> <div class="progress"> <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:10%;">10%</div> </div><br> <div class="progress"> <div class="progress-bar bg-info progress-bar-striped 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:
<!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:
Recommended Posts:
- Progress Bars in ElectronJS | Set - 2
- Progress Bars in ElectronJS | Set - 1
- HTML & CSS | Tabindex attribute & Navigation bars
- How to create Animated bars using HTML and CSS?
- Bootstrap (Part-6) | Progress Bar and Jumbotron
- How to do box shadow with progress bar style using bootstrap?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- Creating Progress Bar using JavaScript
- HTML 5 | <progress> Tag
- HTML | DOM Progress Object
- HTML | DOM Progress max Property
- HTML | <progress> max Attribute
- HTML | <progress> value Attribute
- Upload Progress Bar in PHP
- HTML | DOM Progress position Property
- How to Create a Progress Bar using HTML5 ?
- Semantic-UI | Progress
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
