how to change color of progress bar as it grows

Question

I want to change my progress bar's color as it progresses with javascript here is my javacsript code:

pass.addEventListener('keydown', function() {

    if(pass.value.length === 0){
        myMsg.style.color = 'black';
        myMsg.innerText = "Null";
        strength.value = 0;
    }
    else if(pass.value.length < 4){
        myMsg.style.color = '#FF4A56';
        myMsg.innerText = 'Too Short!';
        strength.value = 20;
        strength.style.background.color = '#FF4A56';
    } 
    else if(pass.value.length < 8) {
        myMsg.style.color = '#FF4A56';
        myMsg.innerText = 'Good!';
        strength.value = 40;
    } 
    else if(pass.value.length <= 10) {
        myMsg.style.color = '#45DE05';
        myMsg.innerText = "Better!";
        strength.value = 60;
    } 
    else if(pass.value.length <= 12) {
        myMsg.style.color = '#44cc0a';
        myMsg.innerText = "Even Better!";
        strength.value = 80;
    }
    else if(pass.value.length <= 14) {
        myMsg.style.color = 'green';
        myMsg.innerText = "Best!";
        strength.value = 100;
    }

});

Answer 1

This code is change background with color every 20%.

function move() {
  var elem = document.getElementById("myBar");   
  var width = 1;
  var id = setInterval(frame, 100);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
    	if(width >= 21 && width <= 40) {
    		document.getElementById("myBar").style.backgroundColor = "yellow";
      		elem.innerHTML = 'Good!';
    	} else if(width >= 41 && width <= 60) {
			document.getElementById("myBar").style.backgroundColor = "blue";
      		elem.innerHTML = 'Better!';
    	} else if(width >= 61 && width <= 80) {
    		document.getElementById("myBar").style.backgroundColor = 'violet';
      		elem.innerHTML = 'Even Better!';
    	} else if(width >= 81 && width <= 100) {
    		document.getElementById("myBar").style.backgroundColor = "green";
      		elem.innerHTML = 'Best!';
    	} else if(width >= 1 && width <= 20) {
    		document.getElementById("myBar").style.backgroundColor = "red";
      		elem.innerHTML = 'Short!';
    	}
      elem.style.width = width + '%'; 
      // elem.innerHTML = width * 1  + '%';
      width++; 
    }
  }
}

#myProgress {
  width: 100%;
  background-color: #ddd;
}

#myBar {
  width: 0%;
  height: 30px;
  background-color: red;
  text-align: center;
  line-height: 30px;
  color: #000;
}

<div id="myProgress">
  <div id="myBar">0%</div>
</div>

<br>
<button onclick="move()">Click Me</button> 

If you wish to change the color, you change the name of the color here,

document.getElementById("myBar").style.backgroundColor = "new-color";

instead of

document.getElementById("myBar").style.backgroundColor = "yellow";

Answer 2

#bar {
    border: 1px solid black;
    height: 16px;
}

#progress {
    background-color: dodgerblue;
    height: 100%;
    width: 0;
}

button {
    display: block;
    margin: auto;
    margin-top: 16px;
}

<div id="bar">
    <div id="progress"></div>
</div>
<button onclick="startProgress()">Start</button>
<script>
    var progress = document.getElementById("progress");
    var width = 0;
    
    var startProgress = function startProgress() {
        width++;
        
        if (width > 75) {
            progress.style.backgroundColor = "gold";
        } else if (width > 50) {
            progress.style.backgroundColor = "orangered";
        } else if (width > 25) {
            progress.style.backgroundColor = "yellowgreen";
        }
        
        progress.style.width = width + "%";
        
        if (width < 100) {
    	window.requestAnimationFrame(startProgress);
    	} else {
    	    window.cancelAnimationFrame(startProgress)
    	}
    };
</script>