Progress Bar Style 1

Loading

75%

                
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-4">Progress Bar Style 1</h2>
        <div class="progress-wrap progress-style-1 pt-3 mb-5">
            <div class="progress-header d-flex flex-wrap justify-content-between">
                <p class="progress-text">Loading</p>
                <p class="progress-value">75%</p>
            </div>
            <div class="progress">
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
            </div>
        </div>
    </div>
</div>

Progress Bar Style 2

75%

                
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-4">Progress Bar Style 2</h2>
        <div class="progress-wrap progress-style-2 mb-5">
            <div class="progress-header text-right">
                <p class="progress-value">75%</p>
            </div>
            <div class="progress">
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
            </div>
        </div>
    </div>
</div>

Progress Bar Style 3

75%

                
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-4">Progress Bar Style 3</h2>
        <div class="progress-wrap progress-style-3 mb-5">
            <div class="progress-header text-right">
                <p class="progress-value">75%</p>
            </div>
            <div class="progress">
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
            </div>
        </div>
    </div>
</div>

Progress Bar Style 4

75%

                
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-4">Progress Bar Style 4</h2>
        <div class="progress-wrap progress-style-4 mb-5">
            <div class="progress-header text-right">
                <p class="progress-value">75%</p>
            </div>
            <div class="progress">
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
            </div>
        </div>
    </div>
</div>

Progress Bar Style 5

75%

                
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-4">Progress Bar Style 5</h2>
        <div class="progress-wrap progress-style-5 mb-5">
            <div class="progress-header text-right">
                <p class="progress-value">75%</p>
            </div>
            <div class="progress">
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
            </div>
        </div>
    </div>
</div>

Progress Bar Style 6

75%
                
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-5">Progress Bar Style 6</h2>
        <div class="progress-wrap progress-style-6 mb-5">
            <div class="progress">
                <div class="progress-bar text-right wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"><span class="mr-2">75%</span></div>
            </div>
        </div>
    </div>
</div>

Progress Bar Style 7

75%

                
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-3">Progress Bar Style 7</h2>
        <div class="progress-wrap progress-style-7 mb-5">
            <div class="progress-header text-right">
                <p class="progress-value">75%</p>
            </div>
            <div class="progress">
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
            </div>
        </div>
    </div>
</div>

Progress Bar Style 8

75%

                
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-3">Progress Bar Style 8</h2>
        <div class="progress-wrap progress-style-8 mb-5">
            <div class="progress-header text-right">
                <p class="progress-value">75%</p>
            </div>
            <div class="progress">
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
            </div>
        </div>
    </div>
</div>

Progress Bar Style 9

75%

                
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-3">Progress Bar Style 9</h2>
        <div class="progress-wrap progress-style-9 mb-5">
            <div class="progress-header text-right">
                <p class="progress-value">75%</p>
            </div>
            <div class="progress">
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:20%"></div>
            </div>
        </div>
    </div>
</div>

Progress Bar Style 10

75%

                
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-3">Progress Bar Style 10</h2>
        <div class="progress-wrap progress-style-10 mb-5">
            <div class="progress-header text-right">
                <p class="progress-value">75%</p>
            </div>
            <div class="progress">
                <div class="progress-bar wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
            </div>
        </div>
    </div>
</div>

Progress Bar Style 11

85% 
                
<div class="row ">
    <div class="col-md-12">
        <h2 class="mb-3">Progress Bar Style 11</h2>
        <div class="progress-style-11">
            <div class="progress-wraper mb-5">
                <div class="progress">
                    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="85" class="progress-bar primary wow fadeInLeft" data-wow-delay=".5s" data-wow-duration="1s" role="progressbar" style="width: 85%; visibility: visible; animation-duration: 1s; animation-delay: 0.5s; animation-name: fadeInLeft;"><span>85%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Progress Bar Style 12

75%

                
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-4">Progress Bar Style 12</h2>
        <div class="progress-wrap progress-style-4 mb-5">
            <div class="progress-header text-right">
                <p class="progress-value">75%</p>
            </div>
            <div class="progress">
                <div class="progress-bar primary wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
            </div>
        </div>
    </div>
</div>

Progress Bar Style 13

75%

                
<div class="row">
    <div class="col-md-12">
        <h2 class="mb-4">Progress Bar Style 13</h2>
        <div class="progress-wrap progress-style-2 mb-5">
            <div class="progress-header text-right">
                <p class="progress-value">75%</p>
            </div>
            <div class="progress">
                <div class="progress-bar primary wow fadeInLeft" data-wow-duration="1s" data-wow-delay=".5s" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"></div>
            </div>
        </div>
    </div>
</div>

Progress Bar Style 14

85% 
                
<div class="row ">
    <div class="col-md-12">
        <h2 class="mb-3">Progress Bar Style 14</h2>
        <div class="progress-style-11">
            <div class="progress-wraper mb-5">
                <div class="progress">
                    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="85" class="progress-bar progress-bar-striped wow fadeInLeft" data-wow-delay=".5s" data-wow-duration="1s" role="progressbar" style="width: 85%; visibility: visible; animation-duration: 1s; animation-delay: 0.5s; animation-name: fadeInLeft;"><span>85%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
HEADER STYLE
COLOR SCHEMES
Combo 1
Combo 2
Combo 3
Combo 4
Combo 5
Combo 6
Combo 7
Combo 8
Combo 9
Combo 10
Buy Now