javascript – Agregar clase según el valor de width con JS

Estoy tratando de agregar la clase bg-success o bg-warning a un progress bar según su valor de style=”width:20%”

Actualmente extraido los datos en una página PHP y los pinto con un echo:

            echo "<tr>
              <td>".$result -> nombre."</td>
              <td>".$result -> materia."</td>
              <td>".$result -> asignatura."</td>
              <td>

              <div class='container-fluid'>
                <div class='row'>
                  <div class='col-md-12'> 
                    <div class='progress'>
                      <div id = 'barra' class='barra progress-bar progress-bar-striped progress-bar-animated' role='progressbar' style='width: ".$result -> calificacion."%' aria-valuenow='100' aria-valuemin='10' aria-valuemax='100'>
                        ".$result -> calificacion."%   
                      </div>
                    </div>
                        <span class='sr-only'>".$result -> calificacion."%</span>
                    </div>
                  </div>
                </div>
              </div>

              </td>
            </tr>";

Hasta aquí todo bien, me pinta el progress bar de color azul, pero quiero cambiar el color conforme al valor que estoy tratando de obtener con un JS al final de la página, ejemplo:

           <script language='javascript' type='text/javascript'>
               function cargaColor() {
           
                  var elemento = document.getElementsByClassName('barra');
                  var valor = document.getElementById('barra').offsetWidth;
                  for(var i = 0; i < elemento.length; i++)
                  if ($valor >= 100) {
                    $elemento(i).className += ' bg-success';
                  } else {
                    $elemento(i).className += ' bg-warning';
                  }

                  }
                  window.onload = cargaColor;
                </script>

Si yo ejecuto el script solo con -$elemento(i).className += ‘ bg-success’- me cambia el color de la barra a verde, pero cuando ya intento hacer función IF y traerme el valor actual de style=width, ya no funciona, estuve buscando diferentes forma de obtener el valor de style=width para poder jugar con ello y adicionar la clase pero sigue sin funcionar, alguna idea?…

De antemano gracias por sus respuestas.

Saludos comunidad.