Animation in native HTML5 ProgressBar

document.getElementById('bt-iniciar').addEventListener('click', iniciarProgressBar);

function iniciarProgressBar(){
    var bar = document.getElementById("myBar");  
    bar.value = 0;
    adicionarDezPorcento();
}

function adicionarDezPorcento() {
  var bar = document.getElementById("myBar");
  bar.value += 5;
  
  if(bar.value == 30) { 
    // aos 30%, esperar 3 segundos
    setTimeout(adicionarDezPorcento, 3000);            
  }
  else if(bar.value < 100) {
    setTimeout(adicionarDezPorcento, 100);
  }
};

<progress id="myBar" max="100" value="0"></progress>

<br>

<button id="bt-iniciar">Iniciar</button>

<progress max="100" id="myBar" value="0" class="progressBar"></progress>


<script>
function move(addthis) 
{
  var elem = document.getElementById("myBar");  
  var loaded = document.getElementById("myBar").value;
  var newvalue = loaded + addthis;
  if(newvalue>100){ newvalue=100; }
  
  var progressvalue = loaded;

  var id = setInterval(function(){ frame(newvalue); }, 10);
  
  function frame(newvalue) 
  {
    if (progressvalue >= newvalue) 
    {
      clearInterval(id);
    } 
    else 
    {
      progressvalue++; 
      document.getElementById("myBar").value = progressvalue;
    }
  }
}

function zero()
{
      document.getElementById("myBar").value = 0;
}
</script>

<br><br>
Teste de carregamento:<br><br>
<input type="button" onclick="move(10)" value="+10%">
<input type="button" onclick="move(25)" value="+25%">
<input type="button" onclick="move(50)" value="+50%"><br><br>
<input type="button" onclick="zero()" value="Recarregar">