ApiDemos™Bootstrap 5 Progress
The progress bar shows the completion process of the user’s task.
The steps to create a basic progress bar are as follows.
- Add a
<div>with a .progress class. - Next, inside the
<div>above, add an empty<div>with class .progress-bar. - Add a style attribute with a percentage representation of the width, e.g.
style="width:70%"indicates that the progress bar is at 70%.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Basic Progress Bar(apidemos.com)</h2>
<p>To create a default progress bar, you can add the .progress class to the container element, add the progress-bar class to the child element, and set the progress-bar progress profile:</p>
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
</div>
</body>
</html>Output:
Progress bar height
The height of the progress bar defaults to 16px, which can be modified using the CSS height property.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Progress bar height(apidemos.com)</h2>
<p>The height of the progress bar defaults to 16px, which we can modify using the CSS height attribute:</p>
<div class="progress" style="height:10px;">
<div class="progress-bar" style="width:40%;"></div>
</div>
<br>
<div class="progress" style="height:20px;">
<div class="progress-bar" style="width:50%;"></div>
</div>
<br>
<div class="progress" style="height:30px;">
<div class="progress-bar" style="width:60%;"></div>
</div>
</div>
</body>
</html>Output:
Progress bar labels
Text can be added inside the progress bar, such as the percentage of progress.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Progress bar text label(apidemos.com)</h2>
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
</div>
</body>
</html>Output:
Different colored progress bars
By default the progress bar is blue, Bootstrap5 also provides progress bars in the following colors.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Multi-color progress bar(apidemos.com)</h2>
<p>Bootstrap 5 provides the following progress bar colors:</p>
<div class="progress">
<div class="progress-bar" style="width:30%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-success" style="width:40%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-info" style="width:50%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-warning" style="width:60%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-danger" style="width:70%"></div>
</div>
</div>
</body>
</html>Output:
Striped progress bar
You can use the .progress-bar-striped class to set the stripe progress bar:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Striped progress bar(apidemos.com)</h2>
<p>You can use the .progress-bar-striped class to set the stripe progress bar:</p>
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:30%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
</div>
</div>
</body>
</html>Output:
Animation progress bar
Use the .progress-bar-animated class to add animations to the progress bar:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Animation progress bar(apidemos.com)</h2>
<p>Use the .progress-bar-animated class to add animations to 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:
Mixed color progress bar
The progress bar can be set in several colors.:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Mixed color progress bar(apidemos.com)</h2>
<p>rogress bar can be set in various colors:</p>
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Safety Line
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning Line
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger Lines
</div>
</div>
</div>
</body>
</html>Output:
