Bizlyt - Bootstrap 5 Premium Admin & Dashboard Template

Basic Progress

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

Different Colored Progress

<div class="progress mb-3" role="progressbar" aria-valuenow="20" aria-valuemin="0"
    aria-valuemax="100">
        <div class="progress-bar bg-secondary" style="width: 20%"></div>
    </div>
    <div class="progress mb-3" role="progressbar"
    aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-warning" style="width: 40%"></div>
    </div>
    <div class="progress mb-3" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-info" style="width: 60%"></div>
    </div>
    <div class="progress mb-3" role="progressbar"
    aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-success" style="width: 80%"></div>
    </div>
    <div class="progress" role="progressbar"
    aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-danger" style="width: 100%"></div>
    </div>

Striped Progress

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

Progress Height

<div class="progress progress-xs mb-3" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary" style="width: 10%">
    </div>
</div>
<div class="progress progress-sm mb-3" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary" style="width: 25%">
    </div>
</div>
<div class="progress mb-3" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary" style="width: 50%">
    </div>
</div>
<div class="progress progress-lg mb-3" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary" style="width: 75%">
    </div>
</div>
<div class="progress progress-xl" role="progressbar" aria-valuenow="100" aria-valuemin="0"
        aria-valuemax="100">
    <div class="progress-bar bg-primary" style="width: 100%"></div>
</div>

Progress With Labels

10%

20%

40%

60%

80%

<div class="progress mb-3" role="progressbar"
    aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 10%;">10%</div>
    </div>
    <div class="progress mb-3" role="progressbar"
            aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-secondary" style="width: 20%;">20%</div>
    </div>
    <div class="progress mb-3" role="progressbar"
    aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-success" style="width: 40%;">40%</div>
    </div>
    <div class="progress mb-3" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-info" style="width: 60%;">60%</div>
    </div>
    <div class="progress mb-0" role="progressbar"
    aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar bg-warning" style="width: 80%;">80%</div>
    </div>

Multiple bars With Sizes

<div class="progress-stacked progress-xs mb-3">
    <div class="progress-bar" role="progressbar" style="width: 5%"
        aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-secondary" 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>
<div class="progress-stacked progress-sm mb-3">
    <div class="progress-bar bg-warning" role="progressbar" style="width: 10%"
        aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
    <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 bg-danger" role="progressbar" style="width: 20%"
        aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-stacked 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 bg-success" role="progressbar" style="width: 20%"
        aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar" role="progressbar" style="width: 25%"
        aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-stacked progress-lg mb-3">
    <div class="progress-bar bg-purple" role="progressbar" style="width: 20%"
        aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-teal" role="progressbar" style="width: 25%"
        aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-orange" role="progressbar" style="width: 30%"
        aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress-stacked progress-xl mb-0">
    <div class="progress-bar bg-success" 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: 30%"
        aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-warning" role="progressbar" style="width: 35%"
        aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Custom Progress-2

<div class="progress progress-sm mb-4" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-item-1 bg-primary"></div><div class="progress-item-2"></div><div class="progress-item-3"></div>
    <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress progress-sm mb-4" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-item-1 bg-secondary"></div><div class="progress-item-2 bg-secondary"></div><div class="progress-item-3"></div>
    <div class="progress-bar bg-secondary" style="width: 60%"></div>
</div>
<div class="progress progress-sm mb-4" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-item-1 bg-success"></div><div class="progress-item-2 bg-success"></div><div class="progress-item-3"></div>
    <div class="progress-bar bg-success" style="width: 70%"></div>
</div>
<div class="progress progress-sm mb-4" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-item-1 bg-info"></div><div class="progress-item-2 bg-info"></div><div class="progress-item-3 bg-info"></div>
    <div class="progress-bar bg-info" style="width: 80%"></div>
</div>
<div class="progress progress-sm" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-item-1 bg-warning"></div><div class="progress-item-2 bg-warning"></div><div class="progress-item-3 bg-warning"></div>
    <div class="progress-bar bg-warning" style="width: 90%"></div>
</div>

Custom Progress-3

50%

60%

70%

<div class="progress progress-lg mb-5 custom-progress-3 progress-animate" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 50%">
        <div class="progress-bar-value">50%</div>
    </div>
</div>
<div class="progress progress-lg mb-5 custom-progress-3 progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-secondary" style="width: 60%">
        <div class="progress-bar-value secondary">60%</div>
    </div>
</div>
<div class="progress progress-lg custom-progress-3 progress-animate" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success" style="width: 70%">
        <div class="progress-bar-value success">70%</div>
    </div>
</div>

Switcher

Progress