Bootstrap Progress Bars
Progress bars give visual feedback about how far along a task is, such as a file upload or a multi-step form. In Bootstrap 5 you build one from a .progress wrapper (the track) and an inner .progress-bar element whose width represents the current value.
The basic structure
Every progress bar needs two elements. The outer <div class="progress"> acts as the full-width track. Inside it, <div class="progress-bar"> is the colored fill. You control how full the bar looks by setting an inline width style, for example style="width: 70%". Adding ARIA attributes tells assistive technology the current value.
A 70% progress bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Labels, height, and colors
Any text you place inside the .progress-bar becomes a visible label. You can change the color of the fill with background utilities like bg-success or bg-info, and you can change the thickness of the whole bar by setting a height on the .progress wrapper.
Colored and taller bars
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="progress mb-2">
<div class="progress-bar bg-success" style="width: 40%">40%</div>
</div>
<div class="progress" style="height: 30px">
<div class="progress-bar bg-info" style="width: 85%">Uploading 85%</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>- Set the width on the .progress-bar to control how full it appears.
- Set the height on the .progress wrapper to make the whole bar thicker or thinner.
- Use bg-* utilities to change the fill color for different meanings.
- Add mb-* spacing utilities to separate stacked bars.
Striped, animated, and stacked bars
Add the progress-bar-striped class for a diagonal striped pattern, and add progress-bar-animated to make those stripes move, which is useful for tasks still in progress. You can also place several .progress-bar elements inside one .progress track to build a stacked bar.
Striped, animated, and stacked
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="progress mb-2">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%">Working...</div>
</div>
<div class="progress">
<div class="progress-bar bg-success" style="width: 30%">30%</div>
<div class="progress-bar bg-warning" style="width: 20%">20%</div>
<div class="progress-bar bg-danger" style="width: 15%">15%</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Progress bar helper classes
In a stacked bar the widths should add up to no more than 100 percent, since they share the same track. Each segment can have its own color, which makes stacked bars handy for showing a breakdown, such as storage used by different file types.
Exercise: Bootstrap Progress Bars
How is the visual fill percentage of a Bootstrap progress bar actually controlled?
