SCIFI - Asp.Net Core8 & Mvc5 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 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>

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>

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>

Animated Stripped Progress

<div class="progress mb-3" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped progress-bar-animated"
        style="width: 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 progress-bar-striped progress-bar-animated" 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-success progress-bar-striped progress-bar-animated" 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 progress-bar-striped progress-bar-animated" style="width: 60%"></div>
</div>
<div class="progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 80%"></div>
</div>

Gradient Progress

<div class="progress mb-3" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary-gradient" style="width: 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-gradient" 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-success-gradient" 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-gradient" style="width: 60%"></div>
</div>
<div class="progress" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-warning-gradient" style="width: 80%"></div>
</div>

Custom Animated Progress

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

Custom Progress-1

Mobiles

50%

Watches

60%

Shirts

70%

<div class="progress progress-sm progress-custom mb-5 progress-animate" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <h6 class="progress-bar-title">Mobiles</h6>
    <div class="progress-bar" style="width: 50%">
        <div class="progress-bar-value">50%</div>
    </div>
</div>
<div class="progress progress-sm progress-custom mb-5 progress-animate" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <h6 class="progress-bar-title bg-secondary">Watches</h6>
    <div class="progress-bar bg-secondary" style="width: 60%">
        <div class="progress-bar-value bg-secondary">60%</div>
    </div>
</div>
<div class="progress progress-sm progress-custom progress-animate" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
    <h6 class="progress-bar-title bg-success">Shirts</h6>
    <div class="progress-bar bg-success" style="width: 70%">
        <div class="progress-bar-value bg-success">70%</div>
    </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>

Custom Progress-4

10%

20%

40%

60%

80%

90%

<div class="progress progress-xl mb-3 progress-animate custom-progress-4" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-primary-gradient" style="width: 10%"></div>
    <div class="progress-bar-label">10%</div>
</div>
<div class="progress progress-xl mb-3 progress-animate custom-progress-4 secondary" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-secondary-gradient" style="width: 20%"></div>
        <div class="progress-bar-label">20%</div>
</div>
<div class="progress progress-xl mb-3 progress-animate custom-progress-4 success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success-gradient" style="width: 40%"></div>
        <div class="progress-bar-label">40%</div>
</div>
<div class="progress progress-xl mb-3 progress-animate custom-progress-4 info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-info-gradient" style="width: 60%"></div>
        <div class="progress-bar-label">60%</div>
</div>
<div class="progress progress-xl mb-3 progress-animate custom-progress-4 warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-warning-gradient" style="width: 80%"></div>
        <div class="progress-bar-label">80%</div>
</div>
<div class="progress progress-xl progress-animate custom-progress-4 danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-danger-gradient" style="width: 90%"></div>
        <div class="progress-bar-label">90%</div>
</div>

Custom Progress-5

Project Dependencies

25%

35%

40%

Html25%

Css35%

Js40%

<h6 class="fw-medium mb-2">Project Dependencies</h6>
    <div class="progress-stacked progress-xl mb-5">
        <div class="progress-bar" role="progressbar" style="width: 25%"
            aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
        <div class="progress-bar bg-secondary" role="progressbar" style="width: 35%"
            aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">35%</div>
        <div class="progress-bar bg-danger" role="progressbar" style="width: 40%"
            aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
    </div>
    <div class="row justify-content-center">
        <div class="col-xl-5">
            <div class="border p-3">
                <p class="fs-12 fw-medium mb-0 text-muted">Html<span class="float-end fs-10 fw-normal">25%</span></p>
                <div class="progress progress-xs mb-4 progress-animate" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar bg-primary" style="width: 25%">
                    </div>
                </div>
                <p class="fs-12 fw-medium mb-0 text-muted">Css<span class="float-end fs-10 fw-normal">35%</span></p>
                <div class="progress progress-xs mb-4 progress-animate" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar bg-secondary" style="width: 35%">
                    </div>
                </div>
                <p class="fs-12 fw-medium mb-0 text-muted">Js<span class="float-end fs-10 fw-normal">40%</span></p>
                <div class="progress progress-xs mb-0 progress-animate" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar bg-danger" style="width: 40%">
                    </div>
                </div>
            </div>
        </div>
    </div>

Switcher

Mobiles

Watches

Shirts

Project Dependencies

Shortcuts

Elizabeth Ava2

George Rhys1

Bethany Isla2

Margaret Emma1

Michael Souris1

Olivia Lily1

Smith Brown2

Wilson Li24

Jones Morton3

White Lee1

Wilfrid Price3

Jasmin O'Kon

River Gleichner

Saul Goodmate1

Edgardo Huel

Find out more !

Notifications :

App :

Remaiders :

This Is Not You're Looking For?