Bootstrap - Progress

Ethan D. - June 1, 2024

Basic Usage

To use Bootstrap Progress in your project, you need to include the Bootstrap CSS and JavaScript files. You can download the files from the Bootstrap website or use a CDN link. After including the files, you can create progress bars.

To create a progress bar, use the <div> element with the class .progress. Inside this <div>, add another <div> element with the class .progress-bar. The .progress-bar <div> shows the progress bar that fills up to show progress.

Progress Bar Example

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

The .progress-bar <div> has a width of 25%, so the progress bar will be 25% filled. The role, aria-valuenow, aria-valuemin, and aria-valuemax attributes are used for accessibility, providing information about the progress bar to assistive technologies.

You can change the width property to set the progress bar to different percentages. For example, setting style="width: 50%;" will make the progress bar half-filled.

By default, the progress bar is blue. You can change the color by adding classes to the .progress-bar <div>, such as .bg-success for a green progress bar or .bg-danger for a red progress bar.

That's the basic usage of Bootstrap Progress. With a few classes and simple HTML structure, you can create progress bars to show completion status in your web pages.

Customizing Progress Bars

Bootstrap Progress bars are customizable. You can change their width, color, add labels, create striped versions, and animate them.

To set the width of a progress bar, use the style attribute on the .progress-bar <div>. Set the width property to a percentage value to define how much of the progress bar should be filled. For example, style="width: 75%;" will make the progress bar 75% filled.

You can change the color of a progress bar by adding color classes to the .progress-bar <div>. Bootstrap provides background color classes, such as .bg-success for green, .bg-info for light blue, .bg-warning for orange, and .bg-danger for red. Add the class to the .progress-bar <div> to apply the color.

Adding labels to progress bars displays the current progress percentage. To add a label, include the percentage text inside the .progress-bar <div>:

Example of Progress Bar with Label

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

Bootstrap allows you to create striped progress bars. To create a striped progress bar, add the .progress-bar-striped class to the .progress-bar <div>. This will apply a striped background pattern to the progress bar.

If you want to animate the stripes on the progress bar, add the .progress-bar-animated class with the .progress-bar-striped class. This will make the stripes move from right to left, creating an animated effect.

Example of Striped and Animated Progress Bar

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

By customizing the width, color, labels, stripes, and animation, you can create appealing and informative progress bars that fit the style and requirements of your web pages.

Stacked Progress Bars

Stacked progress bars in Bootstrap let you show the progress of multiple sub-tasks within a single progress bar. They are helpful when you want to display the completion status of different parts of a larger task or project.

To create stacked progress bars, include multiple .progress-bar <div> elements inside the .progress <div>. Each .progress-bar represents a sub-task or a part of the overall progress.

Example: Creating Stacked Progress Bars

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-danger" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>

There are three .progress-bar <div> elements inside the .progress <div>. Each .progress-bar has a different background color and width, representing different sub-ttasks or parts of the overall progress. The bg-success, bg-warning, and bg-danger classes are used to set the colors of the progress bars.

You can customize stacked progress bars further by adjusting the width of each .progress-bar to reflect the completion status of each sub-task. You can also add labels to each .progress-bar to provide more information about the sub-tasks.

Example: Customizing Stacked Progress Bars with Labels

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    Task 1 (40%)
  </div>
  <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
    Task 2 (30%)
  </div>
  <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    Task 3 (20%)
  </div>
</div>

Labels are added inside each .progress-bar <div> to describe the sub-tasks and their completion percentages.

Stacked progress bars provide a compact and organized way to display the progress of multiple sub-tasks within a single progress bar. They help users understand the overall progress while also seeing the completion status of individual parts of a task or project.

Using Progress Bars with Other Bootstrap Components

Progress bars can be used with other Bootstrap components to make user interfaces that give information and look good. Let's see how progress bars can work with cards, navbars, modals, and list groups.

You can add progress bars inside Bootstrap cards to show how much of a task on the card is done. To add a progress bar to a card, put the .progress and .progress-bar elements inside the .card-body of the card.

Example: Progress Bar in a Card

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Task Progress</h5>
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </div>
</div>

Progress bars can also be put into Bootstrap navbars to show how much of a multi-step process or a series of actions is done. To add a progress bar to a navbar, put the .progress and .progress-bar elements inside the .navbar element.

Example: Progress Bar in a Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</nav>

Bootstrap modals can use progress bars to show how much of a task or action is done while the modal is open. To add a progress bar to a modal, put the .progress and .progress-bar elements inside the .modal-body of the modal.

Example: Progress Bar in a Modal

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal content goes here.</p>
        <div class="progress">
          <div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Progress bars can be used within Bootstrap list groups to show how much of each item in the list is done. To add progress bars to list group items, put the .progress and .progress-bar elements inside the .list-group-item elements.

Example: Progress Bars in List Groups

<ul class="list-group">
  <li class="list-group-item">
    Item 1
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </li>
  <li class="list-group-item">
    Item 2
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
  </li>
</ul>

Accessibility Considerations

When using Bootstrap Progress bars, consider accessibility to make sure that all users, including those with disabilities, can understand and interact with them. Here are some key accessibility considerations for progress bars:

Consideration	Description
Alternative Text	Use the `aria-label` or `aria-labelledby` attribute on the `.progress` element to give a clear and concise description of what the progress bar represents. This helps users understand the purpose and context of the progress bar.
Color Contrast	The color of the progress bar should have a high contrast ratio against the background color to ensure readability. You can use online color contrast checkers to verify that the colors meet the recommended contrast ratios.
ARIA Attributes	Add the `role="progressbar"` attribute to the `.progress-bar` element to indicate that it represents a progress bar. The `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` attributes specify the current value, minimum value, and maximum value of the progress bar, respectively. These attributes help convey the progress information to users who rely on assistive technologies.

Example: Progress Bar with Alternative Text

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

Example: Progress Bar with Sufficient Color Contrast

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

Example: Progress Bar with ARIA Attributes

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

Test your progress bars with assistive technologies and perform accessibility audits to identify and address any potential barriers. By prioritizing accessibility, you create a better user experience for everyone who visits your website.