Bootstrap - Bootstrap 5 progress bars

Bootstrap 5 progress bars are used to visually represent completion or progress of a task. They are highly customizable, responsive, and support colors, labels, striped effects, animated stripes, stacked bars, and height variations.

Here’s a detailed explanation with examples:

1. Basic Progress Bar

<div class="progress mb-3">
  <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50"
    aria-valuemin="0" aria-valuemax="100">50%</div>
</div>

Explanation:

.progress → Container for the progress bar.
.progress-bar → The actual progress bar.
style="width: 50%;" → Sets the progress visually.
aria-valuenow, aria-valuemin, aria-valuemax → Accessibility.

2. Colored Progress Bars

Bootstrap 5 provides contextual color classes:

<div class="progress mb-3">
  <div class="progress-bar bg-success" style="width: 25%;">25%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar bg-info" style="width: 50%;">50%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar bg-warning" style="width: 75%;">75%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar bg-danger" style="width: 100%;">100%</div>
</div>

bg-success, bg-info, bg-warning, bg-danger change the color.

3. Striped Progress Bars

Add .progress-bar-striped to create striped patterns.

<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped" style="width: 50%;">50%</div>
</div>

4. Animated Striped Progress Bars

Add .progress-bar-animated along with .progress-bar-striped for moving stripes.

<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%;">75%</div>
</div>

5. Multiple / Stacked Progress Bars

You can stack multiple bars inside a single .progress container.

<div class="progress mb-3">
  <div class="progress-bar bg-success" style="width: 35%"></div>
  <div class="progress-bar bg-warning" style="width: 20%"></div>
  <div class="progress-bar bg-danger" style="width: 25%"></div>
</div>

6. Progress Bar Heights

Set height using inline style or .progress height:

<div class="progress mb-3" style="height: 1rem;">
  <div class="progress-bar bg-info" style="width: 40%"></div>
</div>

<div class="progress mb-3" style="height: 2rem;">
  <div class="progress-bar bg-primary" style="width: 60%"></div>
</div>

7. Progress Bar Labels

You can add text inside the bar:

<div class="progress mb-3">
  <div class="progress-bar bg-success" style="width: 70%;">70% Complete</div>
</div>

8. Progress Bars with Tooltips

You can combine Bootstrap tooltips:

<div class="progress mb-3" style="height: 2rem;">
  <div class="progress-bar bg-info" style="width: 60%;" data-bs-toggle="tooltip" title="60% Complete">60%</div>
</div>

<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
</script>

9. Full Example: Bootstrap 5 Progress Bars

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 Progress Bars</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">

<h3>Bootstrap 5 Progress Bars</h3>

<!-- Basic -->
<div class="progress mb-3">
  <div class="progress-bar" role="progressbar" style="width: 50%;">50%</div>
</div>

<!-- Colors -->
<div class="progress mb-3">
  <div class="progress-bar bg-success" style="width: 25%;">25%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar bg-info" style="width: 50%;">50%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar bg-warning" style="width: 75%;">75%</div>
</div>
<div class="progress mb-3">
  <div class="progress-bar bg-danger" style="width: 100%;">100%</div>
</div>

<!-- Striped -->
<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped" style="width: 50%;">50%</div>
</div>

<!-- Animated -->
<div class="progress mb-3">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%;">75%</div>
</div>

<!-- Stacked -->
<div class="progress mb-3">
  <div class="progress-bar bg-success" style="width: 35%"></div>
  <div class="progress-bar bg-warning" style="width: 20%"></div>
  <div class="progress-bar bg-danger" style="width: 25%"></div>
</div>

<!-- Height variation -->
<div class="progress mb-3" style="height: 2rem;">
  <div class="progress-bar bg-primary" style="width: 60%;">60%</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>