Navigation Style

Skin Modes

Default Mode
White Mode
Dark Mode

Header Styles Mode

Light Menu
Dark Menu
Color Menu
Graident Menu

Horizontalmenu Styles Mode

Color Menu
Light Menu
Dark Menu
Gradient-Color Menu
Loader

Basic Progress

<div class="progress progress-md mb-3">
    <div class="progress-bar bg-default w-10"></div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-primary w-20"></div>
</div>
<div class="progress progress-md mb-3 ">
    <div class="progress-bar bg-primary w-40"></div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-primary  w-60" ></div>
</div>
<div class="progress progress-md">
    <div class="progress-bar bg-primary  w-80"></div>
</div>

Contextual Progress

<div class="progress progress-md mb-3">
    <div class="progress-bar bg-pink w-10"></div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-green w-20"></div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-yellow w-40"></div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-blue w-60"></div>
</div>
<div class="progress progress-md">
    <div class="progress-bar bg-orange w-80"></div>
</div>

Basic Progress with label

10%
20%
40%
60%
80%
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-default w-10">10%</div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-secondary w-20"> 20%</div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-success w-40"> 40%</div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-warning  w-60"> 60%</div>
</div>
<div class="progress progress-md">
    <div class="progress-bar bg-info w-80"> 80%</div>
</div>

Contextual Progress with label

7%
20%
40%
60%
80%
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-pink w-10"> 7%</div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-green w-20">20%</div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-yellow w-40" >40%</div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-blue w-60">60%</div>
</div>
<div class="progress progress-md ">
    <div class="progress-bar bg-orange w-80"> 80%</div>
</div>

Progress Sizes

<div class="progress progress-xs mb-3">
    <div class="progress-bar bg-blue w-30"></div>
</div>
<div class="progress progress-sm mb-3">
    <div class="progress-bar bg-blue w-60"></div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-blue w-70"></div>
</div>
<div class="progress progress-lg">
    <div class="progress-bar bg-blue w-80"></div>
</div>

Mixed color Progress with Sizes

<div class="progress progress-xs mb-3">
    <div class="progress-bar bg-orange w-5"></div>
    <div class="progress-bar bg-warning w-5"></div>
    <div class="progress-bar bg-info w-5"></div>
</div>
<div class="progress progress-sm mb-3">
    <div class="progress-bar bg-pink w-10"></div>
    <div class="progress-bar bg-yellow w-15"></div>
    <div class="progress-bar bg-teal w-15"></div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar bg-pink w-15"></div>
    <div class="progress-bar bg-blue w-20"></div>
    <div class="progress-bar bg-cyan w-30"></div>
</div>

<div class="progress progress-lg">
    <div class="progress-bar bg-green w-30"></div>
    <div class="progress-bar bg-pink w-20"></div>
    <div class="progress-bar bg-orange w-40"></div>
</div>

Striped Progress

50%
40%
<div class="progress progress-md mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-pink w-10"></div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-blue-1 w-20"></div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-yellow-1 w-40">50%</div>
</div>
<div class="progress progress-md">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-green-1 w-60">40%</div>
</div>

Animated Progress

<div class="progress progress-md mb-3">
    <div class="progress-bar progress-bar-indeterminate bg-pink" ></div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar progress-bar-indeterminate bg-yellow-1"></div>
</div>
<div class="progress progress-md mb-3">
    <div class="progress-bar progress-bar-indeterminate bg-blue-1"></div>
</div>
<div class="progress progress-md">
    <div class="progress-bar progress-bar-indeterminate bg-purple-1"></div>
</div>