Bootstrap 5-Progress Bar
A progress bar can be used to show how far a user is in a process.
To create a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child element. Use the CSS width property to set the width of the progress bar
Basic Progress Bar
<div class = "progress"><div class = "progress-bar" style = "width:80%">
</div>
</div>
Height of Progress Bar
<div class = "progress" style = "height:20px"><div class = "progress-bar" style = "width:80%">
</div>
</div>
Label of Progress Bar
<div class = "progress"><div class = "progress-bar" style = "width:80%">Label data </div>
</div>
Contextual Progress Bar
<div class = "progress"><div class = "progress-bar bg-warning" style = "width:80%">
</div>
</div>
Striped Progress Bar
<div class = "progress"><div class = "progress-bar bg-warning progress-bar-striped" style = "width:80%">
</div>
</div>
Animated Progress Bar
<div class = "progress"><div class = "progress-bar progress-bar-striped progress-bar-animated" style = "width:80%">
</div>
</div>
Multiple Progress Bar
<div class = "progress"><div class = "progress-bar" style = "width:80%">Label Data 1</div>
<div class = "progress-bar" style = "width:80%">Label data 2</div>
</div>
Progress-Bar Example
<html lang = "en"><head>
<title> Bootstrap 5 Example </title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<div class = "progress">
<div class = "progress-bar" style = "width:80%"><br> </div>
</div>
<br> <div class = "progress" style = "height:20px">
<div class = "progress-bar" style = "width:60%">
</div>
</div>
<br> <div class = "progress">
<div class = "progress-bar" style = "width:80%">Label data </div>
</div>
<br> <div class = "progress">
<div class = "progress-bar bg-info" style = "width:75%">
</div>
</div>
<br> <div class = "progress">
<div class = "progress-bar bg-warning progress-bar-striped" style = "width:80%">
</div>
</div>
<br> <div class = "progress">
<div class = "progress-bar progress-bar-striped progress-bar-animated" style = "width:80%">
</div>
</div>
<br> <h4> Multiple Progress Bar </h4> <div class = "progress" style = "height:20px"> <div class = "progress-bar"style = "width:15%"><b> HTML Skill </b></div>
<div class = "progress-bar bg-success" style = "width:30%"><b> CSS Skill </b>></div>
<div class = "progress-bar bg-warning" style = "width: 45%"><b> Bootstrap Skill </b> </div>
<div class = "progress-bar bg-danger" style = "width: 20%"><b> JavaScript Skill </b></div>
</div>
</body>
</html>