JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  <span id="percentual">0</span> %
</p>
<div id="myProgress">
  <div id="myBar">
    <div id="layer-1" class="progress-layer unfill"></div>
    <div id="layer-2" class="progress-layer unfill"></div>
    <div id="layer-3" class="progress-layer unfill"></div>
    <div id="layer-4" class="progress-layer unfill"></div>
    <div id="layer-5" class="progress-layer unfill"></div>
    <div id="layer-6" class="progress-layer unfill"></div>
    <div id="layer-7" class="progress-layer unfill"></div>
    <div id="layer-8" class="progress-layer unfill"></div>
  </div>
</div>

<button onclick="move()">Click Me</button>

CSS

#myProgress {
    position: relative;
    width: 100%;
    height: 10px;
    margin-bottom: 15px;
}
#myBar {
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
}

.progress-layer {
    width: 11.5%;
    margin-right: 0.01%;
    height: 100%;
    display: inline-block;
    background-color: #0096AA;
}

.progress-layer:first-child {
  border-radius: 10px 1px 1px 10px;
}

.progress-layer:last-child {
  border-radius: 1px 10px 10px 1px;
}

JavaScript

function move() {
    var elem = document.getElementById("myBar");
    var percElem = document.getElementById("percentual");
    var layers = 0;
    var percentual = 0;
    var id = setInterval(frame, 10);
    function frame() {
        if (layers > 8) {
            clearInterval(id);
        } else {
        		if (layers < 8) {
              percentual = Math.round((percentual + 0.1) * 100) / 100
              percElem.innerHTML = percentual;
            }
            
        		if (isInt(percentual/12.5)) {
            	console.log(percentual);
            	layers++;
            
              var layer = document.getElementById("layer-" + layers);
              layer.style.backgroundColor = '#9FD175';

            }
        }
    }
}

function isInt(n) {
   return n % 1 === 0;
}