JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="button">Click</button> 

<p id="counter"></p>
<div id="bar"></div>

CSS

#bar {
    width:300px;
    height:10px;
    margin:20px auto;
}

JavaScript

var count = 0;
var par = 0;

    
function render(){
    
    var css = ['background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(125,185,232,1) ' + par + '%, rgba(0,0,0,1) ' + par + '%, rgba(0,0,0,1) 100%);',
'background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(125,185,232,1) ' + par + '%,rgba(0,0,0,1) ' + par + '%,rgba(0,0,0,1) 100%);',
'background: linear-gradient(left, rgba(30,87,153,1) 0%,rgba(125,185,232,1) ' + par + '%,rgba(0,0,0,1) ' + par + '%,rgba(0,0,0,1) 100%);'].join('');
    
    $('#counter').text(par);
    $('#bar').attr('style', css);
    
};

$('#button').click(function(){
    count++;
    
    par = Math.round((count/50) * 100);
    
    render();
});
   
render(par);