Bootstrap - Bootstrap Progress Bars

Bootstrap Progress Bars are UI components used to visually represent the completion status of a task or process. They are useful when you want to show information such as file-upload progress, course completion, project completion, installation status, survey completion, or any other activity that can be represented as a percentage.

Bootstrap provides ready-to-use CSS classes for creating progress bars without requiring you to write extensive custom CSS. The basic progress bar consists of a progress container and a progress bar placed inside it.

1. Basic Progress Bar

The basic structure uses the .progress class as the outer container and .progress-bar for the actual progress indicator.

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

Here:

  • .progress creates the background container.

  • .progress-bar creates the colored progress indicator.

  • width: 50% determines how much of the progress container is filled.

The result represents 50% completion.

2. Understanding the Progress Container

The .progress element acts as a wrapper around the progress bar.

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

The outer container provides the available space, while the inner .progress-bar determines the amount of that space that is filled.

For example:

  • width: 25% represents 25% completion.

  • width: 50% represents 50% completion.

  • width: 75% represents 75% completion.

  • width: 100% represents complete progress.

3. Adding a Percentage Label

You can place text inside the progress bar to display the completion percentage.

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

The text 60% appears inside the filled portion of the progress bar.

This is particularly useful because users can understand the exact completion level instead of estimating it from the visual width.

4. Setting Progress with CSS Width

The most common way to control the progress level is by using the CSS width property.

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

In this example, the progress bar fills 30% of the available width.

You can change the value according to the actual progress:

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

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

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

This approach is useful for static progress indicators.

5. Colored Progress Bars

Bootstrap allows you to apply contextual colors to progress bars.

For example:

<div class="progress">
  <div class="progress-bar bg-success" style="width: 80%;">
    80%
  </div>
</div>

The .bg-success class gives the progress bar a success-oriented appearance.

Other contextual background classes can also be used:

<div class="progress">
  <div class="progress-bar bg-primary" style="width: 40%;">40%</div>
</div>

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

<div class="progress">
  <div class="progress-bar bg-warning" style="width: 70%;">70%</div>
</div>

<div class="progress">
  <div class="progress-bar bg-danger" style="width: 90%;">90%</div>
</div>

The choice of color can communicate additional meaning. For example, a success color can indicate successful completion, while a warning or danger color can indicate a condition that requires attention.

6. Striped Progress Bars

Bootstrap provides the .progress-bar-striped class for creating a striped appearance.

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

The stripes provide a different visual style from the standard progress bar.

Striped progress bars can be useful when you want the progress indicator to stand out from other page elements.

7. Animated Progress Bars

Bootstrap also supports animated stripes through the .progress-bar-animated class.

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

Here, three classes are being used:

progress
progress-bar
progress-bar-striped
progress-bar-animated

The .progress-bar-animated class animates the stripes of the progress bar.

This can be useful for processes that are actively running, such as file processing or data loading.

8. Changing the Height

Bootstrap's default progress bar has a predefined height, but you can change it using CSS.

<div class="progress" style="height: 30px;">
  <div class="progress-bar" style="width: 65%;">
    65%
  </div>
</div>

The height property controls the height of the entire progress container.

You can use a smaller height for subtle progress indicators:

<div class="progress" style="height: 10px;">
  <div class="progress-bar" style="width: 65%;"></div>
</div>

Or a larger height when you need a more prominent indicator.

9. Multiple Progress Bars

Bootstrap allows multiple progress bars to exist inside the same .progress container.

<div class="progress">
  <div class="progress-bar bg-success" style="width: 30%;">
    30%
  </div>
  <div class="progress-bar bg-warning" style="width: 40%;">
    40%
  </div>
</div>

In this example, the first progress bar occupies 30% and the second occupies 40%.

Together they occupy 70% of the available space.

Multiple progress bars can be useful for displaying the distribution of different categories.

For example, you could represent:

Completed: 30%
In Progress: 40%
Remaining: 30%

10. Progress Bars with Accessibility Attributes

A progress bar should also provide information to users who rely on assistive technologies.

A more accessible implementation can include ARIA attributes:

<div class="progress" role="progressbar"
     aria-label="File upload progress"
     aria-valuenow="75"
     aria-valuemin="0"
     aria-valuemax="100">

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

The important attributes are:

role="progressbar"
Identifies the element as a progress bar to assistive technologies.

aria-valuenow="75"
Indicates the current progress value.

aria-valuemin="0"
Defines the minimum possible value.

aria-valuemax="100"
Defines the maximum possible value.

Using these attributes makes the progress information more understandable to users who cannot rely solely on the visual appearance.

11. Dynamic Progress Bars with JavaScript

Progress bars become particularly useful when their value changes dynamically.

For example:

<div class="progress">
  <div id="progressBar"
       class="progress-bar"
       style="width: 0%;">
    0%
  </div>
</div>

<button onclick="increaseProgress()">Increase</button>

<script>
let progress = 0;

function increaseProgress() {
  if (progress < 100) {
    progress += 10;

    const bar = document.getElementById("progressBar");

    bar.style.width = progress + "%";
    bar.textContent = progress + "%";
  }
}
</script>

Every time the button is clicked, the progress increases by 10%.

The JavaScript changes two things:

bar.style.width = progress + "%";

This changes the visual width.

bar.textContent = progress + "%";

This updates the displayed percentage.

12. Real-World Example: File Upload

Progress bars are commonly used during file uploads.

For example, an application might initially show:

Uploading: 20%

Then:

Uploading: 50%

And eventually:

Uploading: 100%

A Bootstrap implementation could be:

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

In a real application, JavaScript would normally update the width and ARIA value according to the actual upload status.

13. Real-World Example: Course Completion

Progress bars are also useful in online education platforms.

<h5>Course Completion</h5>

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

This communicates that the learner has completed 85% of the course.

14. Important Bootstrap Classes

The following classes are commonly associated with Bootstrap progress bars:

Class Purpose
.progress Creates the progress container
.progress-bar Creates the actual progress indicator
.progress-bar-striped Adds a striped appearance
.progress-bar-animated Animates the stripes
.bg-primary Applies primary background styling
.bg-success Applies success background styling
.bg-warning Applies warning background styling
.bg-danger Applies danger background styling

15. Complete Example

Here is a complete example combining several Bootstrap progress-bar features:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Progress Bars</title>

  <link
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet">
</head>

<body>

<div class="container mt-5">

  <h2>Project Progress</h2>

  <div class="progress"
       role="progressbar"
       aria-label="Project completion"
       aria-valuenow="75"
       aria-valuemin="0"
       aria-valuemax="100">

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

  </div>

</div>

</body>
</html>

This example creates a 75% progress indicator with a striped and animated appearance.

16. Progress Bar vs. Spinner

Progress bars and spinners serve different purposes.

A progress bar is appropriate when the application knows approximately how much of a process has been completed.

For example:

Downloading 75%

A spinner is more appropriate when the application cannot determine the exact completion percentage.

For example:

Loading...

Therefore, progress bars communicate measurable progress, while spinners generally communicate ongoing activity.

17. Best Practices

When using Bootstrap progress bars, keep the following principles in mind:

  1. Use a meaningful percentage when the actual progress can be measured.

  2. Include a text percentage when it improves clarity.

  3. Use appropriate ARIA attributes for accessibility.

  4. Keep the progress value between the defined minimum and maximum.

  5. Use animation only when it communicates an active process.

  6. Avoid using colors as the only method of communicating status.

  7. Update the progress bar dynamically when the underlying process changes.

  8. Make sure the progress indicator remains understandable on smaller screens.

Conclusion

Bootstrap Progress Bars provide a simple way to communicate the status of measurable tasks. By combining .progress and .progress-bar, developers can quickly create basic progress indicators and then enhance them with percentage labels, contextual styling, stripes, animation, multiple segments, custom heights, and accessibility attributes.

They are particularly useful in file uploads, downloads, installations, course completion, project tracking, surveys, and data-processing applications. When combined with JavaScript, a Bootstrap progress bar can become a dynamic component that accurately reflects the current state of a real application.