javascript - Animando el valor del elemento Progress

Tengo un elemento progress. Ese elemento se ve de la siguiente manera:

<div class="container">
  <div id="progress-bar">
    <progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
  </div>

  <br>
  <button id="animateButton" class="btn btn-secondary">Animate</button>
</div>

Cuando un usuario haga clic en el botón "animar", quiero llenar la barra de progreso con una barra naranja hasta el 75%. La animación debe durar 0,5 segundos (medio segundo).

Como se muestra en este Bootply, estoy atascado intentando que la animación funcione. Intenté usar setInterval, sin embargo, la animación estaba muy entrecortada. Además, no pude hacer que la barra fuera naranja. Siempre era verde.

¿Hay alguna manera de animar el valor de un elemento de progreso para una animación suave?

Respuesta #1

En los navegadores webkit puedes usar una pseudoclase para agregar una transición y color:

$('#animateButton').on('click', function() {
  $('#myProgressBar').val(75);
});

progress[value]::-webkit-progress-value {
    transition: width 0.5s;
    background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="progress-bar">
    <progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
  </div>

  <br>
  <button id="animateButton" class="btn btn-secondary">Animate</button>
</div>

Si necesitas un soporte más amplio de navegadores, puedes iterar el valor hasta que llegues al valor objetivo para animar la barra. Sin embargo, no puedes cambiar el color.

function animateProgress($progressBar, val, currentVal) {
  currentVal = currentVal || 0;
  
  var step = val * 16 / 500;
  
  function animate(currentVal) {
    currentVal += step;
  
    $progressBar.val(currentVal);
    
    currentVal < val && requestAnimationFrame(function() {
      animate(currentVal);
    });
  }
  
  animate(currentVal);
}

$('#animateButton').on('click', function() {
  animateProgress($('#myProgressBar'), 75);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="progress-bar">
    <progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
  </div>

  <br>
  <button id="animateButton" class="btn btn-secondary">Animate</button>
</div>

Respuesta #2

Lo mismo que la respuesta aceptada, pero simplificado + sin jQuery:

progress {
    background-color: orange;
}

progress::-webkit-progress-value {
    transition: width 0.5s;
    background-color: orange;
}

Click on the progress bar:<br>
<progress value="0" max="100" onclick="this.value=50;"></progress>