SOURCE

var planBarEle = document.getElementById("plan-bar");
var countEle = document.getElementById("count");
var barWidth = 0;
let v1 = setInterval(progress, 100);
// 加载进度条的函数
function progress(){
    // 
    if(barWidth !== 100){
        barWidth++;
        planBarEle.style.width = barWidth + "%";
        countEle.innerHTML = barWidth;
    }else {
        window.clearInterval(v1)
    }
}

<div class="plan-box">
    <div class="plan-bar" id="plan-bar">
        <div class="plan-count">
            <span id="count">0</span>%
        </div>
    </div>
</div>

*{
    margin: 0;
    padding: 0;
}
 body{
     background: #777;
     padding: 20px;
}
.plan-box{
    width: 30%;
    padding: 5px 7px;
    border-radius: 15px;
    border-top: 1px solid #000;
    background: #000;
    border-bottom: 1px solid #999;
    margin: 100px auto;
}
.plan-box .plan-bar{
    width: 0%;
    height: 15px;
    background: #40af80;
    border-radius: 20px;
    border-top: 1px solid #64d9a8;
    border-bottom: 1px solid #217954;
    position: relative;
    transition: width .1s ease;
}
.plan-box .plan-bar .plan-count{
    width: 37px;
    text-align: center;
    padding: 5px 0;
    background: #333;
    color: #fff;
    position: absolute;
    bottom: 36px;
    right: -5px;
}
.plan-box .plan-bar .plan-count:after{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 8px 0px 8px;
    border-color: #333 transparent transparent transparent;
    position: absolute;
    bottom: -7px;
    left: 12px;
}