Finder Buy now

Progress

Custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Bootstrap docs

Color variation (thick)

45%
60%
55%
40%
70%
60%
33%
<!-- Primary progress bar -->
<ngb-progressbar textType="white" [value]="45" [showValue]="true"></ngb-progressbar>

<!-- Accent progress bar -->
<ngb-progressbar type="accent" textType="white" [value]="60" [showValue]="true"></ngb-progressbar>

<!-- Success progress bar -->
<ngb-progressbar type="success" textType="white" [value]="55" [showValue]="true"></ngb-progressbar>

<!-- Danger progress bar -->
<ngb-progressbar type="danger" textType="white" [value]="40" [showValue]="true"></ngb-progressbar>

<!-- Warning progress bar -->
<ngb-progressbar type="warning" textType="white" [value]="70" [showValue]="true"></ngb-progressbar>

<!-- Info progress bar -->
<ngb-progressbar type="info" textType="white" [value]="60" [showValue]="true"></ngb-progressbar>

<!-- Dark progress bar -->
<ngb-progressbar type="dark" textType="white" [value]="33" [showValue]="true"></ngb-progressbar>

Color variation (thin)

45%
60%
55%
40%
70%
60%
33%
<!-- Primary progress bar -->
<div class="fs-sm mb-2">45%</div>
<ngb-progressbar textType="white" [value]="45" height="4px" [showValue]="true"></ngb-progressbar>

<!-- Accent progress bar -->
<div class="fs-sm mb-2">60%</div>
<ngb-progressbar type="accent" textType="white" [value]="60" height="4px" [showValue]="true"></ngb-progressbar>

<!-- Success progress bar -->
<div class="fs-sm mb-2">55%</div>
<ngb-progressbar type="success" textType="white" [value]="55" height="4px" [showValue]="true"></ngb-progressbar>

<!-- Danger progress bar -->
<div class="fs-sm mb-2">40%</div>
<ngb-progressbar type="danger" textType="white" [value]="40" height="4px" [showValue]="true"></ngb-progressbar>

<!-- Warning progress bar -->
<div class="fs-sm mb-2">70%</div>
<ngb-progressbar type="warning" textType="white" [value]="70" height="4px" [showValue]="true"></ngb-progressbar>

<!-- Info progress bar -->
<div class="fs-sm mb-2">60%</div>
<ngb-progressbar type="info" textType="white" [value]="60" height="4px" [showValue]="true"></ngb-progressbar>

<!-- Dark progress bar -->
<div class="fs-sm mb-2">33%</div>
<ngb-progressbar type="dark" textType="white" [value]="33" height="4px" [showValue]="true"></ngb-progressbar>

Multiple bars

<!-- Thick bars -->
<div class="progress mb-3">
  <div class="progress-bar bg-info" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Thin bars -->
<div class="progress mb-3" style="height: 2px;">
  <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-info" role="progressbar" style="width: 25%" aria-valuenow="25" 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 class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Animated striped bars

<!-- Striped primary progress bar -->
<ngb-progressbar [value]="60"></ngb-progressbar>

<!-- Striped accent progress bar -->
<ngb-progressbar type="accent" [value]="60"></ngb-progressbar>

<!-- Striped success progress bar -->
<ngb-progressbar type="success" [value]="50"></ngb-progressbar>

<!-- Striped danger progress bar -->
<ngb-progressbar type="danger" [value]="40"></ngb-progressbar>

<!-- Striped warning progress bar -->
<ngb-progressbar type="warning" [value]="70"></ngb-progressbar>

<!-- Striped info progress bar -->
<ngb-progressbar type="info" [value]="60"></ngb-progressbar>

<!-- Striped dark progress bar -->
<ngb-progressbar type="dark" [value]="33"></ngb-progressbar>

Light version

45%
60%
55%
40%
70%
60%
<!-- Primary progress bar -->
<ngb-progressbar textType="white" [value]="45" [showValue]="true"></ngb-progressbar>

<!-- Accent progress bar -->
<ngb-progressbar type="accent" textType="white" [value]="60" [showValue]="true"></ngb-progressbar>

<!-- Success progress bar -->
<ngb-progressbar type="success" textType="white" [value]="55" [showValue]="true"></ngb-progressbar>

<!-- Danger progress bar -->
<ngb-progressbar type="danger" textType="white" [value]="40" [showValue]="true"></ngb-progressbar>

<!-- Warning progress bar -->
<ngb-progressbar type="warning" textType="white" [value]="70" [showValue]="true"></ngb-progressbar>

<!-- Info progress bar -->
<ngb-progressbar type="info" textType="white" [value]="60" [showValue]="true"></ngb-progressbar>
Top