JSFiddle - React, Tailwind, and code Playground

HTML

<button>Button</button>
<div id='loadContainer'>Lots of text lots of text<span></span></div>

CSS

#loadContainer{
    text-align:center;
    color:#FFF;
    background: linear-gradient(to right, #0000ff 0%,#0000ff 0%,#ff0000 0%,#ff0000 100%);
    height:20px;
}

#loadContainer span{
    display:inline-block;
    width:0;
    height:0;
    display:none;
}

JavaScript

$("button").click(function(){    
    $('#loadContainer span').animate({width:'100%'}, {
        duration:10000,
        easing:'linear',
        step:function(a,b){
            $(this).parent().css({
                background:'linear-gradient(to right, #0000ff 0%,#0000ff '+a+'%,#ff0000 '+a+'%,#ff0000 100%)'
            });
        }
    });
});