JSFiddle - React, Tailwind, and code Playground

by rustyDroid

HTML

<a id="btn" href="javaScript:void(0)">start</a>
<div id="bar" style="border:1px solid black;width:0px;background-color:red">&nbsp;</div>

JavaScript

$("#btn").click(function(){
    $('#bar').animate({ width: '300px' }, 
    {
        duration:10000,
        easing:'linear',
        step:function(a,b){
            var pc = Math.ceil(b.now*255/b.end);
            var blue = pc.toString(16);
            var red = (255-pc).toString(16);
            var rgb=red+"00"+blue;
            $('#bar').css({
                backgroundColor:"#"+rgb
            });            
        }
    })
});