[Dilettante_Pro]

Что-то примерно так?

<style>
  td { position:relative;
        width:20px;
    
 }

</style>
Процент<input type='text'/>
<table >
  <tr>
    <td>0%</td>
  </tr>
   <tr>
    <td>25% </td>
  </tr>
   <tr>
    <td>50% </td>
  </tr>
  <tr>
    <td>75% </td>
  </tr>
  <tr>
    <td>100% </td>
  </tr>
</table>
<script>
document.querySelector('input').onchange = function() {
  var percent = +this.value;
  var arr = document.querySelectorAll('td');
  for(var i = 0;i < arr.length ;i++) {
     arr[i].style.backgroundColor = "white";
  }
  for(var i = 0;i < ((arr.length * percent) / 100) ;i++) {
     arr[i].style.backgroundColor = "red";
  }
}
</script>