Progress bars
Progress bars show how far along a task is.
In this page:
Syntax
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%">50%</div>
</div>Progress bars
A .progress wrapper holds a .progress-bar whose width is set with an inline style (or the w-* utilities). Add role="progressbar" and aria-valuenow, aria-valuemin and aria-valuemax.
Striped and animated variants use .progress-bar-striped and .progress-bar-animated, and multiple bars can be stacked.
Note:
Set the width style and aria-valuenow to the same percentage.
Example: Progress 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="progress mb-2" role="progressbar" aria-label="Basic" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar" style="width: 25%">25%</div></div>
<div class="progress mb-2" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 60%">60%</div></div>
<div class="progress" style="height: 20px"><div class="progress-bar bg-info" style="width: 40%"></div><div class="progress-bar bg-warning" style="width: 20%"></div></div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Missing ARIA values
- Mismatched width and aria-valuenow
- Overusing animated stripes
Chapter Summary
- progress wraps progress-bar
- Width shows the percentage
- ARIA attributes describe it
- Striped and animated variants
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: