JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" id="interval"/>
<button class="startBtn">
  start
</button>
<div class="container">
  <div class="bar">
    <div class="bar-progress"></div>
  </div>
</div>

CSS

.container{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 50px;
}
.bar{
  width: 100%;
  height: 30px;
  border: 1px solid #f7f7f7;
  border-radius: 20px;
  overflow:hidden;
}
.bar .bar-progress{
  width: 0;
  height: 100%;
  background: blue;
  display:flex;
  justify-content: center;
  align-items: center;
}

JavaScript

let i = 1;
let interval;
let progress = $('.bar-progress');
$('.startBtn').on('click', function(){
   $('.bar-progress').css({
     'width': '0px'
   });
	interval = $('#interval').val();
  pause();
});
 pause = function() {
   i++;
   let bgColor = getRandomColor();
   $('.bar-progress').css({
     'width': (i * 20) + '%',
     'background': bgColor,
   })
   .html((i * 20) + '%');
   
   if (i == 5) {
   	 i = 1;
     return;
   }
   setTimeout(pause, interval);
 }
 function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}