Bootstrap 5 Progress Bars

Welcome to The Coding College—your go-to resource for coding and programming tutorials! Today, we’ll explore Progress Bars in Bootstrap 5, an essential UI component for visually representing the progress of tasks.

Progress bars are widely used in web applications to display task completion, upload progress, loading indicators, and more. Bootstrap 5 makes it incredibly easy to implement and customize progress bars for a variety of use cases.

What Are Progress Bars in Bootstrap 5?

A progress bar is a graphical representation of a process. It typically uses a filled bar to indicate the percentage of completion. In Bootstrap 5, progress bars are implemented using the .progress and .progress-bar classes, along with a few supporting utilities for customization.

Creating a Basic Progress Bar

To create a simple progress bar, use the .progress container with a nested .progress-bar element.

Example: Basic Progress Bar

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

Output:

A horizontal progress bar with 50% completion.

Explanation:

• style="width: 50%;": Defines the fill percentage of the progress bar.
• aria-valuenow="50": Represents the current value (accessible for screen readers).
• aria-valuemin="0" and aria-valuemax="100": Define the range of the progress bar.

Adding Labels to Progress Bars

You can display text inside the progress bar to indicate the percentage or status.

Example: Progress Bar with Label

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

Customizing Progress Bar Colors

Bootstrap 5 provides a variety of contextual color classes to match your theme or represent specific statuses.

Available Classes:

Example: Colorful Progress Bars

<div class="progress mb-2">
  <div class="progress-bar bg-success" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    40%
  </div>
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
    70%
  </div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning text-dark" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
    90%
  </div>
</div>

Striped Progress Bars

Add a striped effect to progress bars using the .progress-bar-striped class.

Example: Striped Progress Bar

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

Animated Stripes

Make the stripes animate by adding the .progress-bar-animated class.

Example: Animated Progress Bar

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    80%
  </div>
</div>

Stacked Progress Bars

You can stack multiple progress bars within a single .progress container to display multi-part progress.

Example: Stacked Progress Bars

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-warning text-dark" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-danger" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Sizing Progress Bars

Bootstrap 5 allows you to adjust the size of progress bars using utility classes like .progress-sm or .progress-lg.

Example: Different Sizes

<div class="progress progress-sm mb-2">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>

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

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

Indeterminate Progress

While Bootstrap doesn’t provide native support for indeterminate progress bars, you can simulate one using an animated striped bar.

Example: Indeterminate Progress

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Accessibility Best Practices

1. ARIA Attributes: Always use aria-valuenow, aria-valuemin, and aria-valuemax to ensure the progress bar is accessible to screen readers.
2. Text Labels: Provide visible or hidden labels (<span class="visually-hidden">) to describe the progress.
3. Color Contrast: Ensure adequate color contrast between the progress bar and its background.

Use Cases for Progress Bars

1. File Uploads: Show the percentage of an upload.
2. Process Completion: Display the progress of a multi-step process.
3. Performance Metrics: Visualize performance indicators or statistics.
4. Loading Indicators: Provide feedback during long-running operations.

FAQs About Bootstrap 5 Progress Bars

Q1: Can I customize the width dynamically with JavaScript?

A: Yes! You can change the width style property using JavaScript to dynamically update the progress bar.

document.querySelector('.progress-bar').style.width = '80%';

Q2: Are progress bars responsive?

A: Yes, progress bars automatically resize to fit their container.

Q3: Can I add icons inside progress bars?

A: Absolutely! You can include icons or text inside progress bars for more detailed indicators.

Conclusion

Bootstrap 5 Progress Bars are a versatile and powerful component for visually representing progress in your web applications. Whether you’re creating a file upload interface, a loading indicator, or a process tracker, Bootstrap’s progress bars provide a simple and effective solution.