JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="progress">
    </div>
    <span></span>
</div>

CSS

div.wrapper {
    border-radius: 10px;
    background-color: #ccc;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    height: 50px;
    width: 450px;
    margin: 20px auto;
    position: relative;
}
div.progress {
    height: 50px;
    width: 10px;
    border-radius: 10px;
}
span {
    top: 15px;
    left: 200px;
    position: absolute;
}

JavaScript

$("div.progress").animate({
    'width': 450
}, {
    duration: 3000,
    step: function(now, fx) {
        if (fx.pos < 0.25) {
            $(this).css("background-color", "red");
        } else if (fx.pos > 0.25 && fx.pos < 0.5) {
            $(this).css("background-color", "yellow");
        } else if (fx.pos > 0.5 && fx.pos < 0.75) {
            $(this).css("background-color", "orange");
        } else if (fx.pos > 0.75) {
            $(this).css("background-color", "green");
        }
        if (fx.pos != 1) {
            $("span").text((fx.pos * 100).toFixed(0) + "%");
        } else {
            $("span").text("Done!");
        }
    }
});