console
var bar = document.getElementById("plan-bar");
var count = document.getElementById("count");
var barWidth = 0;
function b() {
if (barWidth != 100) {
barWidth++;
bar.style.width = barWidth + "%";
count.innerHTML = barWidth;
} else {
window.clearInterval(t1);
};
};
var t1 = window.setInterval("b()", 100);
<div class="plan-box">
<div class="plan-bar" id="plan-bar">
<div class="plan-count">
<span id="count">0</span>%
</div>
</div>
</div>
* {
padding: 0;
margin: 0;
}
body {
background: #777;
padding: 20px;
}
.plan-box {
width: 30%;
padding: 5px 7px;
background: #333;
border-radius: 20px;
border-top: 1px solid #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;
right: -5px;
bottom: 36px;
border-radius: 3px;
border: 1px solid #111;
}
.plan-box .plan-bar .plan-count::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 8px 8px 0 8px;
border-color: #333 transparent transparent transparent;
position: absolute;
left: 12px;
bottom: -7px;
}