JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper"> Translating <span class="info"></span>...<div class="progress-bar" ease-in-out><span id="progress-bar-fill" class="progress-bar-fill" style="width: 0%;"></span></div>
</div>

CSS

.progress-bar {
                    width: 100%;
                    background-color: #e0e0e0;
                    padding: 3px;
                    border-radius: 3px;
                    box-shadow: inset 0 1px 3px rgba(47, 44, 56);
                }

                .progress-bar-fill {
                    display: block;
                    height: 22px;
                    background-color: #ffffff;
                    border-radius: 3px;
                    transition: width 500ms ease-in-out;
                    }

JavaScript

var bar = document.getElementById("progress-bar-fill")
var width = 0
var interval = setInterval(myTimer, 1000);

function myTimer() {
  if(width === 100) {
   clearInterval(interval)
  }
  bar.style.width = width+"%";
  width = width + 20
}