JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress">
  <div class="bar"></div>
  <div class="percent">50%</div>
</div>

<button id="set30" class="changeprogress">30%</button>
<button id="set70" class="changeprogress">70%</button>
<button id="set100" class="changeprogress">100%</button>

CSS

.progress {
      position: relative;
      width: 500px;
      border: 1px solid #333;
      position: relative;
      padding: 3px;
    }
    
    .bar {
      background-color: #00ff00;
      width: 50%;
      height: 20px;
    }
    
    .percent {
      position: absolute;
      display: inline-block;
      top: 3px;
      left: 48%;
    }

JavaScript

$('.changeprogress').click(function() {
  var width = 1;
  var percent = $(this).text().replace('%','') ;
  var id = setInterval(frame, 25);

  function frame() {
    if (width >= percent) {
      clearInterval(id);
    } else {
      width++;
      $('.bar').css('width', width + '%');
      $('.percent').text(width + '%');
    }
  }

});