SOURCE

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;
        }