进度条的实现

Js：

$(function(){
    var goodNum="90%";//好评的百分比
    var mediumNum="10%"//中评的百分比
    var badNum="3%"//差评的百分比
    var num=goodNum.substring(0,2)
// 进度条
    $(".bars").append("<div class='bars_left'><span class='good_number'>"+num+"</span><span>好评度</span> </div>");
    $(".bars").append("<div class='bars_middle'><ul><li>好评（"+goodNum+"）</li><li>中评（"+mediumNum+"）</li><li>差评（"+badNum+"）</li></ul></div>")
    $(".bars").append("<div class='bars_right'> </div>")
    $(".bars_right").append("<div class='progress'><span class='first' style='width:"+goodNum+"'><em></em><span></span></span> </div>")
    $(".bars_right").append("<div class='progress'><span class='two' style='width:"+mediumNum+"'><em></em><span></span></span> </div>")
    $(".bars_right").append("<div class='progress'><span class='three' style='width:"+badNum+"'><em></em><span></span></span> </div>")

    var temp=goodNum.tostring().split('(')[1].split(')')[0].split(',');
})

css样式：

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}


.bars{
    overflow: hidden;
    border-bottom: 1px solid #E9E4E4;
    padding-bottom: 20px;
    margin:5px 20px;
}
.bars_left{
    float: left;
    margin: 25px 5% 0 0;
    font-size: 14px;
    overflow: hidden;
}
.bars_middle{
    float: left;
    margin: 23px 0 0 0;
    font-size: 14px;
}
.bars_middle ul li{
    line-height: 24px;
}
.bars_left span{
    display: block;
    text-align: center;
}
.good_number{
    font-size:32px;
    color: #f8711f;
}
.bars_right{
    overflow: hidden;
    width: 110px;
    margin: 26px 0  0 3%;
    float: left;
}
.progress {
    height: 16px;
    margin-bottom: 8px;
    background: #ebebeb;
}
.progress > span {
    position: relative;
    float: left;
    margin: 0 -1px;
    height:16px;
    text-align: right;
    background: #cccccc;

}
.progress > span:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 18px;
    background: url("../images/progress.png") 0 0 repeat-x;
    border-radius: 10px;
}
.progress span{
    background: #39bcaf;
    overflow: hidden;

}


实现效果：