Progress

Documentation and examples explaining how to use custom progress bars, stacked bars, text labels and so on.

## How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. Bootstrap don't use the HTML5 `<progress>` element, ensuring you can stack progress bars, animate them, and place text labels over them.

- We use the `.progress` as a wrapper to indicate the max value of the progress bar.
- We use the inner `.progress-bar` to indicate the progress so far.
- The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width.
- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible.

Put that all together, and you have the following examples.

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

Bootstrap provide a handful of utilities for setting width. Depending on your needs, these may help with quickly configuring progress.

      <div class="progress mb-3">
        <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

## Labels

Add labels to your progress bars by placing text within the `.progress-bar`.

Label
Value
16 Jul 2018

      <div class="progress progress-xl">
        <div class="progress-bar bg-transparent h6 text-dark text-left mb-0 px-3" style="width: 30%">
          <span class="d-none d-md-inline">Label</span>
        </div>
        <div class="progress-bar text-left ml-auto px-3" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
          <span class="d-none d-md-inline">Value</span>
        </div<
        <div class="progress-bar bg-semi-soft-primary text-right px-3" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
          <span class="d-none d-md-inline">16 Jul 2018</span>
        </div>
      </div>

## Sizes

Fancy larger or smaller progresses? Add `.progress-xs`, `.progress-sm` or `progress-xl` for additional sizes.

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

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

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

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

## Backgrounds

Use background utility classes to change the appearance of individual progress bars.

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

## Multiple bars

Include multiple progress bars in a progress component if you need.

      <div class="progress mb-3">
        <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
        <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-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
      </div>