0

Bootstrap 3 animated ratings with progress bar

$(document).ready(function() {
    $('.progress .progress-bar').css("width",
        function() {
            return $(this).attr("aria-valuenow") + "%";
        }
    )
});
 <div class="container">
     <div class="row mt-20">
         <div class="col-md-12">
             <div class="progress skill-bar ">
                 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> <span class="skill"><i class="fa fa-star"></i> 5 Star <i class="val">25 reviews</i></span> </div>
             </div>
             <div class="progress skill-bar">
                 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="29" aria-valuemin="0" aria-valuemax="100"> <span class="skill"><i class="fa fa-star"></i> 4 star<i class="val">3 reviews</i></span> </div>
             </div>
             <div class="progress skill-bar">
                 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"> <span class="skill"><i class="fa fa-star"></i> 3 star<i class="val">34 reviews</i></span> </div>
             </div>
             <div class="progress skill-bar">
                 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> <span class="skill"><i class="fa fa-star"></i> 2 star<i class="val">1 review</i></span> </div>
             </div>
             <div class="progress skill-bar">
                 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"> <span class="skill"><i class="fa fa-star"></i> 1 star<i class="val">10 reviews</i></span> </div>
             </div>
         </div>
     </div>
 </div>
.mt-20 {
    margin-top: 100px
}

.progress {
    height: 31px;
    margin-bottom: 10px
}

.progress .skill {
    font: normal 12px "Open Sans Web";
    line-height: 16px;
    padding: 0;
    margin: 0 0 0 20px;
    text-transform: uppercase
}

.progress .skill .val {
    float: right;
    font-style: normal;
    margin: 0 20px 0 0
}

.progress-bar {
    text-align: left;
    transition-duration: 3s
}

.bsp_big-image {
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0);
    border-radius: 5px;
    margin-top: 0px
}
RUN
add comment
Suggest a different solution or add another example