Cartzilla 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>

Use case: Rating breakdown

5
43
4
16
3
9
2
4
1
2 
<!-- 5 stars -->
<div class="d-flex align-items-center mb-2">
  <div class="text-nowrap me-3">
    <span class="d-inline-block align-middle text-muted">5</span>
    <i class="ci-star-filled fs-xs ms-1"></i>
  </div>
  <div class="w-100">
  <ngb-progressbar textType="white" [value]="43" height="4px" [showValue]="true"></ngb-progressbar>
  </div>
  <span class="text-muted ms-3">43</span>
</div>

<!-- 4 stars -->
<div class="d-flex align-items-center mb-2">
  <div class="text-nowrap me-3">
    <span class="d-inline-block align-middle text-muted">4</span>
    <i class="ci-star-filled fs-xs ms-1"></i>
  </div>
  <div class="w-100">
  <ngb-progressbar textType="white" [value]="16" height="4px" [showValue]="true"></ngb-progressbar>

  </div>
  <span class="text-muted ms-3">16</span>
</div>

<!-- 3 stars -->
<div class="d-flex align-items-center mb-2">
  <div class="text-nowrap me-3">
    <span class="d-inline-block align-middle text-muted">3</span>
    <i class="ci-star-filled fs-xs ms-1"></i>
  </div>
  <div class="w-100">
  <ngb-progressbar textType="white" [value]="9" height="4px" [showValue]="true"></ngb-progressbar>
  </div>
  <span class="text-muted ms-3">9</span>
</div>

<!-- 2 stars -->
<div class="d-flex align-items-center mb-2">
  <div class="text-nowrap me-3">
    <span class="d-inline-block align-middle text-muted">2</span>
    <i class="ci-star-filled fs-xs ms-1"></i>
  </div>
  <div class="w-100">
  <ngb-progressbar textType="white" [value]="4" height="4px" [showValue]="true"></ngb-progressbar>
  </div>
  <span class="text-muted ms-3">4</span>
</div>

<!-- 1 star -->
<div class="d-flex align-items-center">
  <div class="text-nowrap me-3">
    <span class="d-inline-block align-middle text-muted">1</span>
    <i class="ci-star-filled fs-xs ms-1"></i>
  </div>
  <div class="w-100">
  <ngb-progressbar textType="white" [value]="2" height="4px" [showValue]="true"></ngb-progressbar>
  </div>
  <span class="text-muted ms-3">2</span>
</div>
Top