<h3 class="sc-sub-title">Style 1</h3> <h4 class="progress-title">HTML 5</h4> <div class="progress"> <div class="progress-bar" style="width: 95%;"></div> </div> <h4 class="progress-title">CSS 3</h4> <div class="progress"> <div class="progress-bar" style="width: 90%;"></div> </div> <h4 class="progress-title">jQuery</h4> <div class="progress"> <div class="progress-bar" style="width: 65%;"></div> </div> <h4 class="progress-title">PHP</h4> <div class="progress"> <div class="progress-bar" style="width: 50%;"></div> </div> <h3 class="sc-sub-title">Style 2</h3> <h4 class="progress-title">HTML 5</h4> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 95%;"></div> </div> <h4 class="progress-title">CSS 3</h4> <div class="progress"> <div class="progress-bar progress-bar-info" style="width: 90%;"></div> </div> <h4 class="progress-title">jQuery</h4> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width: 65%;"></div> </div> <h4 class="progress-title">PHP</h4> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width: 50%;"></div> </div> <h3 class="sc-sub-title">Style 3</h3> <h4 class="progress-title">HTML 5</h4> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 95%;"></div> </div> <h4 class="progress-title">CSS 3</h4> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 90%;"></div> </div> <h4 class="progress-title">jQuery</h4> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 65%;"></div> </div> <h4 class="progress-title">PHP</h4> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 50%;"></div> </div>
.progress-title { font-size: 14px; font-weight: 400; line-height: 14px; margin: 0 0 5px; } .progress { background-color: #fff; border-radius: 0; box-shadow: none; height: 8px; } .progress-bar { background-color: #f05a66; box-shadow: none; } .progress-bar.progress-bar-success { background-color: #5cb85c; } .progress-bar.progress-bar-info { background-color: #5bc0de; } .progress-bar.progress-bar-warning { background-color: #f0ad4e; } .progress-bar.progress-bar-danger { background-color: #d9534f; }