用js做一个动态的条形图

思路就是给布好的静态条形动态化，需要进行动态的条形的父元素
CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background: #000;
}
ul{
    list-style: none;
}

.look07-rec{
    width: 350px;
    margin-top: 45px;
    position: absolute;
    top: 0;
    left: 20px;
}
.look07-rec li{
    text-align: left;
    line-height: 20px;
    margin-top: 20px;
    color: #fff;
}
.look-list07__rec-bg{
    text-align: right;
    position: relative;
    margin-top: 6px;
}
.look-list07__rec-bg span{
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
}
.rec-bg{
    width: 10px;
    height: 20px;
    background: #249979;
}

HTML:

<ul class="look07-rec">
    <li>
        <span>50后</span>
        <div class="look-list07__rec-bg">
            <div class="rec-bg"></div>
            <span>5%</span>
        </div>
    </li>
    <li>
        <span>60后</span>
        <div class="look-list07__rec-bg">
            <div class="rec-bg"></div>
            <span>17%</span>
        </div>
    </li>
    <li>
        <span>70后</span>
        <div class="look-list07__rec-bg">
            <div class="rec-bg"></div>
            <span>30%</span>
        </div>
    </li>
    <li>
        <span>80后</span>
        <div class="look-list07__rec-bg">
            <div class="rec-bg"></div>
            <span>33%</span>
        </div>
    </li>
    <li>
        <span>90后</span>
        <div class="look-list07__rec-bg">
            <div class="rec-bg"></div>
            <span>12%</span>
        </div>
    </li>
    <li>
        <span>其他