#### Progress

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Table of Contents

- How it works

#### How it works

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We 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.

Profit $3K
Orders 576
Tasks Complete 70%
Open Rate 60%

                        <div class="progress-card">
                          <div class="progress-status">
                            <span class="text-muted">Profit</span>
                            <span class="text-muted"> $3K</span>
                          </div>
                          <div class="progress" style="height: 2px;">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="top" title="" data-original-title="78%"></div>
                          </div>
                        </div>

                        <div class="progress-card">
                          <div class="progress-status">
                            <span class="text-muted">Orders</span>
                            <span class="text-muted"> 576</span>
                          </div>
                          <div class="progress" style="height: 4px;">
                            <div class="progress-bar bg-info" role="progressbar" style="width: 65%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="top" title="" data-original-title="65%"></div>
                          </div>
                        </div>

                        <div class="progress-card">
                          <div class="progress-status">
                            <span class="text-muted">Tasks Complete</span>
                            <span class="text-muted fw-bold"> 70%</span>
                          </div>
                          <div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="top" title="" data-original-title="70%"></div>
                          </div>
                        </div>

                        <div class="progress-card">
                          <div class="progress-status">
                            <span class="text-muted">Open Rate</span>
                            <span class="text-muted fw-bold"> 60%</span>
                          </div>
                          <div class="progress">
                            <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="top" title="" data-original-title="60%"></div>
                          </div>
                        </div>