Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Progress bars

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

Bootstrap docs

## Color variations (thick)

45%
55%
40%
70%
60%
33%
78%

    <!-- Primary progress bar (default) -->
    <div class="progress mb-3">
      <div class="progress-bar bg-gradient" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
        45%
      </div>
    </div>

    <!-- Success progress bar -->
    <div class="progress mb-3">
      <div class="progress-bar bg-success bg-gradient" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
        55%
      </div>
    </div>

    <!-- Danger progress bar -->
    <div class="progress mb-3">
      <div class="progress-bar bg-danger bg-gradient" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        40%
      </div>
    </div>

    <!-- Warning progress bar -->
    <div class="progress mb-3">
      <div class="progress-bar bg-warning bg-gradient" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
        70%
      </div>
    </div>

    <!-- Info progress bar -->
    <div class="progress mb-3">
      <div class="progress-bar bg-info bg-gradient" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        60%
      </div>
    </div>

    <!-- Dark progress bar -->
    <div class="progress mb-3">
      <div class="progress-bar bg-dark bg-gradient" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">
        33%
      </div>
    </div>

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

## Color variations (thin)

Primary - 45%
Success - 55%
Danger - 40%
Warning - 70%
Info - 60%
Dark - 33%
Gradient - 78%

    <!-- Primary progress bar (default) -->
    <div class="fs-sm mb-2">Primary - 45%</div>
    <div class="progress mb-3" style="height: 4px;">
      <div class="progress-bar" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Success progress bar -->
    <div class="fs-sm mb-2">Success - 55%</div>
    <div class="progress mb-3" style="height: 4px;">
      <div class="progress-bar bg-success" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Danger progress bar -->
    <div class="fs-sm mb-2">Danger - 40%</div>
    <div class="progress mb-3" style="height: 4px;">
      <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Warning progress bar -->
    <div class="fs-sm mb-2">Warning - 70%</div>
    <div class="progress mb-3" style="height: 4px;">
      <div class="progress-bar bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Info progress bar -->
    <div class="fs-sm mb-2">Info - 60%</div>
    <div class="progress mb-3" style="height: 4px;">
      <div class="progress-bar bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Dark progress bar -->
    <div class="fs-sm mb-2">Dark - 33%</div>
    <div class="progress mb-3" style="height: 4px;">
      <div class="progress-bar bg-dark" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Gradient progress bar -->
    <div class="fs-sm mb-2">Gradient - 78%</div>
    <div class="progress mb-3" style="height: 4px;">
      <div class="progress-bar bg-gradient" role="progressbar" style="width: 78%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

## Multiple bars

    <!-- Thick bars -->
    <div class="progress mb-3">
      <div class="progress-bar bg-info bg-gradient" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
      <div class="progress-bar bg-danger bg-gradient" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
      <div class="progress-bar bg-success bg-gradient" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
      <div class="progress-bar bg-warning bg-gradient" 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 -->
    <div class="progress mb-3">
      <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Striped success progress bar -->
    <div class="progress mb-3">
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Striped danger progress bar -->
    <div class="progress mb-3">
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Striped warning progress bar -->
    <div class="progress mb-3">
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Striped info progress bar -->
    <div class="progress mb-3">
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Striped dark progress bar -->
    <div class="progress mb-3">
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-dark" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

## Use case: Rating breakdown

5
43
4
16
3
9
2
4
1
2

    <!-- Progress bars use case: Rating breakdown -->

    <!-- 5 stars -->
    <div class="d-flex align-items-center mb-2">
      <div class="text-nowrap me-3">
        <span class="d-inline-block align-middle">5</span>
        <i class="bx bx-star opacity-70 align-middle ms-1"></i>
      </div>
      <div class="w-100">
        <div class="progress" style="height: 4px;">
          <div class="progress-bar bg-success" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <span class="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">4</span>
        <i class="bx bx-star opacity-70 align-middle ms-1"></i>
      </div>
      <div class="w-100">
        <div class="progress" style="height: 4px;">
          <div class="progress-bar" role="progressbar" style="width: 27%; background-color: #a7e453;" aria-valuenow="27" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <span class="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">3</span>
        <i class="bx bx-star opacity-70 align-middle ms-1"></i>
      </div>
      <div class="w-100">
        <div class="progress" style="height: 4px;">
          <div class="progress-bar bg-warning" role="progressbar" style="width: 17%;" aria-valuenow="17" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <span class="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">2</span>
        <i class="bx bx-star opacity-70 align-middle ms-1"></i>
      </div>
      <div class="w-100">
        <div class="progress" style="height: 4px;">
          <div class="progress-bar" role="progressbar" style="width: 9%; background-color: #fa8027;" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <span class="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">1</span>
        <i class="bx bx-star opacity-70 align-middle ms-1"></i>
      </div>
      <div class="w-100">
        <div class="progress" style="height: 4px;">
          <div class="progress-bar bg-danger" role="progressbar" style="width: 4%;" aria-valuenow="4" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <span class="ms-3">2</span>
    </div>

Top