JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div id="test"></div>
</div>
<input type="button" id="run" value="RUN"></input>
<input type="input" id="value" value="75"></input>

CSS

#container {
	position: absolute;
	height: 50px;
	width: 300px;
	border: solid 1px black;
	display: block;
	top: 40px;
}

#test {
	position: absolute;
	height: 100%;
	width: 0px;
	display: block;
	top: 0px;
	left: 0px;
}

.animated {
	-webkit-animation-name: colors;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

#run {
	width: 40px;
	height: 25px;
}

@-webkit-keyframes colors
{
    0% {width: 0%; background-color: red;}
   30% {           background-color: red;}
   50% {           background-color: yellow;}
  100% {width: 100%; background-color: green;}
}

JavaScript

var intervalFunc;
var containerWidth;
var stopAt;

$(document).ready(function() {

    
$("#run").click(function() {
    containerWidth = $("#container").width();
    entered = $("#value").val();
    stopAt = containerWidth * entered / 100; 
    $("#test").removeClass ("animated");
    intervalFunc = setInterval (Stop, 10);
    setTimeout (Start, 10);
});

})

function Start () {
    $("#test").addClass ("animated");
    $("#test").removeAttr("style");
    
}

function Stop () {
    var elem = document.getElementById('test');
    var style = window.getComputedStyle (elem, null);
    var frame = style.getPropertyValue("width");
    var width = parseInt(frame,10);
    if (width > stopAt) {
        elem.style.webkitAnimationPlayState = "paused";
        clearInterval (intervalFunc);
    }
}