Bootstrap 5 Progress Bars: A Guide to Using the Intuitive Progress Display Component

What is Bootstrap 5 Progress Bar?¶

A progress bar is a common component for displaying task completion in web pages. Bootstrap 5’s progress bar component not only includes built-in basic styles but also supports responsive layouts, color customization, animation effects, etc. It can quickly meet various progress display needs without writing CSS from scratch.

1. Basic Usage: The Simplest Progress Bar¶

The core structure of Bootstrap 5 progress bars consists of two nested <div> elements: an outer container with .progress and an inner progress bar with .progress-bar. Set the width of .progress-bar to display the progress.

Example Code:

<div class="progress">
  <div class="progress-bar" style="width: 60%"></div>
</div>

Explanation:
- .progress: The outer container, which is styled with a default background color and fixed height to ensure a uniform appearance.
- .progress-bar: The inner progress bar, which must have its width set via the width property or utility classes (e.g., 60% indicates 60% completion).

2. Color Customization: Changing the Progress Bar’s “Skin”¶

Bootstrap 5 provides a rich set of background color classes. Add these classes directly to .progress-bar (e.g., bg-primary, bg-success) to quickly change the progress bar’s color.

Example Code:

<!-- Success-colored progress bar -->
<div class="progress">
  <div class="progress-bar bg-success" style="width: 30%"></div>
</div>

<!-- Warning-colored progress bar -->
<div class="progress">
  <div class="progress-bar bg-warning" style="width: 75%"></div>
</div>

Common Color Classes:
- bg-primary (primary), bg-success (success), bg-info (info), bg-danger (danger), bg-warning (warning), etc.
- Custom colors can also be set using style="background-color: custom-color;" (e.g., style="background-color: #ff6347;").

3. Adjusting Height: Controlling Progress Bar Thickness¶

The height of the progress bar can be adjusted via utility classes or directly using the height style. The default height is small (about 0.5rem), suitable for compact layouts. For thicker progress bars, customize the height.

Example Code:

<!-- Using Bootstrap height utility classes (h-2=0.5rem, h-3=0.75rem, etc.) -->
<div class="progress h-2">
  <div class="progress-bar bg-primary" style="width: 50%"></div>
</div>

<!-- Directly setting height (e.g., 20px) -->
<div class="progress" style="height: 20px;">
  <div class="progress-bar bg-info" style="width: 80%"></div>
</div>

4. Striped Effect: Adding Visual Hierarchy¶

Use the .progress-bar-striped class to add horizontal stripes to the progress bar. Combine it with .bg-gradient for gradient stripes, making the progress more intuitive.

Example Code:

<!-- Basic striped effect -->
<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 40%"></div>
</div>

<!-- Gradient striped effect -->
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-gradient" style="width: 65%"></div>
</div>

5. Dynamic Animation: Making the Progress Bar “Move”¶

To automatically load the progress bar (e.g., simulating file downloads), use the .progress-bar-animated class for static animation, or combine with JavaScript to update progress dynamically.

Static Animation (No JS Needed):

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 0%"></div>
</div>

Explanation: .progress-bar-animated makes the striped background “flow” from left to right, simulating the progress loading process.

Dynamic Progress (With JS):
To update progress after a button click, use JavaScript to modify the width of .progress-bar. For example:

<div class="progress">
  <div class="progress-bar" id="myProgress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
</div>
<button onclick="updateProgress()">Load Progress</button>

<script>
  function updateProgress() {
    const bar = document.getElementById('myProgress');
    let width = 0;
    const interval = setInterval(() => {
      width += 1;
      bar.style.width = `${width}%`;
      bar.setAttribute('aria-valuenow', width);
      if (width >= 100) clearInterval(interval);
    }, 30);
  }
</script>

6. Stacked Progress Bars: Simultaneous Multi-Task Progress¶

To display progress for multiple tasks (e.g., “50% completed + 30% remaining”), place multiple .progress-bar elements inside the same .progress container for horizontal stacking.

Example Code:

<div class="progress">
  <div class="progress-bar bg-primary" style="width: 50%"></div>
  <div class="progress-bar bg-success" style="width: 30%"></div>
  <div class="progress-bar bg-warning" style="width: 20%"></div>
</div>

7. Accessibility Optimization: Making Progress Bars User-Friendly¶

To ensure screen readers recognize progress bar values, add aria-valuenow (current progress), aria-valuemin (minimum value), and aria-valuemax (maximum value) attributes:

Example Code:

<div class="progress">
  <div class="progress-bar bg-info" 
       style="width: 70%" 
       role="progressbar" 
       aria-valuenow="70" 
       aria-valuemin="0" 
       aria-valuemax="100">
    70% Complete
  </div>
</div>

Summary¶

Bootstrap 5 progress bars achieve multiple effects through simple class names and utility classes. Key points:
- Basic Structure: .progress (container) + .progress-bar (progress bar).
- Color Customization: Use bg-* classes.
- Style Extensions: Height (h-* utility classes), stripes (progress-bar-striped), animations (progress-bar-animated).
- Dynamic Progress: Modify width with JavaScript or use animation classes.

By following these methods, you can quickly implement intuitive and beautiful progress displays on web pages, enhancing user experience.