#### 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>

60% Complete

#### 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>

85% Complete (success)

#### Colored bars

###### you can create any colors you want

60% Complete
60% Complete
60% Complete
60% Complete
60% Complete
60% Complete

#### Different bar sizes

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

60% Complete
60% Complete
60% Complete
60% Complete
60% Complete

#### Animated Striped bar

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

60% Complete
60% Complete
60% Complete
60% Complete
60% Complete

                                                        <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%

60% Complete

##### Code editor90%

60% Complete

##### Illustrator65%

60% Complete

####

######

##### Dreamweaver85%

60% Complete

##### Coral Draw45%

60% Complete

##### Sketch25%

60% Complete

                                                    <!-- 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>

##### Layout Settings

Dark Theme
Collapse Sidebar
Fixed Sidebar
Fixed Header
Boxed Layout

##### Logo Backgrounds

##### Navbar Backgrounds

##### Sidebar Backgrounds

- ##### Pavan kumar

  Just see the my admin! 9:30 AM

  ##### Sonu Nigam

  I've sung a song! See you at 9:10 AM

  ##### Arijit Sinh

  I am a singer! 9:08 AM

  ##### Nirav Joshi

  Just see the my admin! 9:02 AM

  ##### Sunil Joshi

  Just see the my admin! 9:02 AM

  ##### Akshay Kumar

  Just see the my admin! 9:02 AM

  ##### Pavan kumar

  Just see the my admin! 9:02 AM

  ##### Varun Dhavan

  Just see the my admin! 9:02 AM

###### Activity Timeline

Meeting today 5pm
you can write anything
Send documents to Clark
Lorem Ipsum is simply
Go to the Doctor 5 minutes ago
Contrary to popular belief
Stephen 5 minutes ago
Approve meeting with tiger
Meeting today 5pm
you can write anything
Send documents to Clark
Lorem Ipsum is simply
Go to the Doctor 5 minutes ago
Contrary to popular belief
Stephen 5 minutes ago
Approve meeting with tiger