JSFiddle - React, Tailwind, and code Playground

by Jeferson Almeida

HTML

<h1 id="progress-text"></h1>
<div id="progress-container">
  <div id="progress"></div>
</div>

CSS

#progress {
	width: 0%;
	white-space:nowrap;
	text-wrap:none;
  height: 50px;
}

#progress-container {
  border: solid 2px black;
  width: 200px;
}

JavaScript

// Just used as a shortcut for below, completely optional
const red = -100,
      yellow = 0,
      green = 120,
      turquoise = 180,
      blue = 240,
      pink = 300;
        
function hsl_col_perc(percent, start, end) {
  var a = percent / 100,
      b = (end - start) * a,
  		c = b + start;

  // Return a CSS HSL string
  return 'hsl('+c+', 100%, 50%)';
}

// Simple little animation
var percent = 0,
    progressDiv = document.getElementById('progress'),
    textDiv = document.getElementById('progress-text'),
    progressContainerDiv = document.getElementById('progress-container')

function step(timestamp) {
	percent = (percent<100) ? percent+0.5 : 0;
	
  // Play with me!
  let colour = hsl_col_perc(percent, red, green);//Red -> Green
  progressDiv.style.backgroundColor = colour;
  progressContainerDiv.style.borderColor = colour;
  progressDiv.style.width = percent+'%';
  textDiv.innerHTML = Math.floor(percent);
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);