JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="myProgress" width="510" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

</body>

</html>

JavaScript

var canvas = document.getElementById('myProgress');
	var myPerc = 500;
    ctx = canvas.getContext('2d');

    ctx.fillStyle = "rgb(255, 0, 0)";  //red
	
    ctx.fillRect(0,0,myPerc,100);
	ctx.save();
		for (var i=0;i<(myPerc*0.5);i++)
		{ 
			ctx.fillStyle = "rgb(0, 255, 0)";  //greeen
      (function(i){
				setTimeout(function() {
						ctx.fillRect(0,0,+i,100);
				}, 1000*i);
      })(i);
			
		}