Bootstrap Progress bars
Progress bars means how much the current process is done . And we use .progress-bar class for it.
Let’s understand by the basic progress bars:-
Basic Progress bars
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Basic Progress Bar</h2>
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
</div>
</body>
</html>
Output of this Program
So here the progress bar we had created .
Colored Progress Bars
We can add background color to our progress bars.
Let’s understand them by this program :-
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Colored Progress Bars</h2>
<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-white" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-light" style="width:80%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
</div>
</body>
</html>
Output of this Program
Animated Progress Bar
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Animated Progress Bar</h2>
<p>Add the .progress-bar-animated class to animate the progress bar:</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>
</div>
</body>
</html>
Output of this Program
Animated Progress Bar
Add the .progress-bar-animated class to animate the progress bar:
Here we changes the background color of our progress bars.
Multiple Progress Bars
We can also show multiple progress bars together with different color.
Let’s understand them by this program :-
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Multiple Progress Bars </h2>
<p>People taking tea </p>
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Uttarakhand
</div>
<div class="progress-bar bg-warning" style="width:40%">
Haryana
</div>
<div class="progress-bar bg-danger" style="width:40%">
Delhi
</div>
</div>
</div>
</body>
</html>
Output of this Program
Multiple Progress Bars
People taking tea
Uttarakhand
Haryana
Delhi
So here we just created multiple progress together.
