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>
                                            
                                        
All Rights Reserved by Ample admin. Designed and Developed by WrapPixel.