<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" style="height: 10px;">
    <div class="progress-bar bg-success" style="width: 75%;" role="progressbar">75%</div>
</div>

<div class="progress mt-3">
    <div class="progress-bar bg-info progress-bar-striped" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%; height:10px;" role="progressbar"> <span class="sr-only">85% Complete (success)</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: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" style="height: 15px;">
    <div class="progress-bar bg-danger" style="width: 60%;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress mt-4" style="height: 15px;">
    <div class="progress-bar bg-info" style="width: 40%;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress mt-4" style="height: 15px;">
    <div class="progress-bar bg-success" style="width: 20%;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress mt-4" style="height: 15px;">
    <div class="progress-bar bg-primary" style="width: 30%;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress mt-4" style="height: 15px;">
    <div class="progress-bar bg-warning" style="width: 80%;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>
<div class="progress mt-4" style="height: 15px;">
    <div class="progress-bar bg-inverse" style="width: 40%;" role="progressbar"> <span class="sr-only">60% Complete</span> </div>
</div>

<div class="progress mt-4">
    <div class="progress-bar 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 progress-bar-striped 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 progress-bar-striped 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 progress-bar-striped 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 progress-bar-striped 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 progress-bar-striped 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 progress-bar-striped bg-primary progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
 </div>
 <div class="progress mt-4">
   <div class="progress-bar progress-bar-striped bg-info progress-bar-animated" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"></div>
 </div>
 <div class="progress mt-4">
   <div class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar" aria-valuenow="52" aria-valuemin="0" aria-valuemax="100" style="width: 52%"></div>
 </div>
 <div class="progress mt-4">
   <div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" role="progressbar" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100" style="width: 32%"></div>
 </div>
 <div class="progress mt-4">
   <div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" role="progressbar" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100" style="width: 12%"></div>
 </div>
 <div class="progress mt-4">
   <div class="progress-bar progress-bar-striped bg-dark progress-bar-animated" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="width: 67%"></div>
 </div>