JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loading">
    <div class="loading-progress"></div>
</div>

CSS

.loading {
    width: 100%;
    height: 20px;
    background: #555;
}
.loading .loading-progress {
    width: 0;
    height: 100%;
    background: #87581c;
    transition: all 0.5s ease-out;
}

JavaScript

var loadingProgress = $('.loading-progress');

loadingProgress.animate({
    width: '20%'
}, {
    duration: 2000,
    step: function (progress) {
        loadingProgress.css({
            backgroundColor: progressColor(progress)
        });
    }
});

function progressColor(progress) {
    if (progress >= 0 && progress <= 24) return '#a41818';
    else if (progress >= 25 && progress <= 49) return '#87581c';
    else if (progress >= 50 && progress <= 74) return '#997815';
    else if (progress >= 75 && progress <= 89) return '#659a1f';
    else if (progress >= 90 && progress <= 100) return '#659a1f';
}