Xtreme admin Template - The Ultimate Multipurpose admin template

Default Progress bars

<div class="progress">
<div class="progress-bar bg-danger " role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%; height:6px;"> <span class="sr-only">50% Complete</span></div>
</div>

Default Progress bars

<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%;height:15px;" role="progressbar""> 75% </div>
</div>

75%

Striped Progress bar

<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width:85%;height:10px;"> <span class="sr-only">85% Complete</span></div>
</div>

Colored bars

you can create any colors you want

Different bar sizes

you can create any size you want just give height to bar

Animated Striped bar

You can also use animated bar by just putting `active` class

                                                
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-info" style="width: 40%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-success" style="width: 20%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-primary" style="width: 30%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-warning" style="width: 80%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-inverse" style="width: 40%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>

                                                
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-danger" style="width: 60%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-info" style="width: 40%; height:8px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-success" style="width: 20%; height:10px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-primary" style="width: 30%; height:12px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-warning" style="width: 80%; height:14px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>

                                                
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar active progress-bar-striped bg-danger" style="width: 60%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-info active progress-bar-striped" style="width: 40%; height:8px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-success active progress-bar-striped" style="width: 20%; height:10px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-primary active progress-bar-striped" style="width: 30%; height:12px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>
                                                    <div class="progress mt-4">
                                                        <div class="progress-bar bg-warning active progress-bar-striped" style="width: 80%; height:14px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                    </div>

Skill Bars

you can create animated skill bar if you want just put `wow animated progress-animated`

Photoshop85%

Code editor90%

Illustrator65%

Dreamweaver85%

Coral Draw45%

Sketch25%

                                            
                                                <!-- SKILL BARS -->
                                                <div class="progress ">
                                                    <div class="progress-bar bg-danger wow animated progress-animated" style="width: 85%; height:6px;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
                                                </div>

Default Progress bars

Default Progress bars

Striped Progress bar

Colored bars

you can create any colors you want

Different bar sizes

you can create any size you want just give height to bar

Animated Striped bar

You can also use animated bar by just putting `active` class

Skill Bars

you can create animated skill bar if you want just put `wow animated progress-animated`

Photoshop85%

Code editor90%

Illustrator65%

Dreamweaver85%

Coral Draw45%

Sketch25%

Pavan kumar

Sonu Nigam

Arijit Sinh

Nirav Joshi

Sunil Joshi

Akshay Kumar

Pavan kumar

Varun Dhavan

Collapsible Group Item #1

Collapsible Group Item #2

Collapsible Group Item #3

Luanch Admin

Event today

Settings

Pavan kumar

Pavan kumar

Sonu Nigam

Arijit Sinh

Pavan kumar

Progressbar

$58,256

Default Progress bars

Default Progress bars

Striped Progress bar

Colored bars

you can create any colors you want

Different bar sizes

you can create any size you want just give height to bar

Animated Striped bar

You can also use animated bar by just putting active class

Skill Bars

you can create animated skill bar if you want just put wow animated progress-animated

Photoshop85%

Code editor90%

Illustrator65%

Dreamweaver85%

Coral Draw45%

Sketch25%

Pavan kumar

Sonu Nigam

Arijit Sinh

Nirav Joshi

Sunil Joshi

Akshay Kumar

Pavan kumar

Varun Dhavan

You can also use animated bar by just putting `active` class

you can create animated skill bar if you want just put `wow animated progress-animated`