Creé algunas barras de progreso usando boostrap 3 que mostrarán resultados diferentes cada vez que se actualice la página. Aquí está el HTML para mis barras de progreso:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-5"> <p>Progress bar1</p> <div class="progress progress-striped active"> <div class="progress-bar"></div> </div> <p>Progress bar2</p> <div class="progress progress-striped active"> <div class="progress-bar"></div> </div> <p>Progress bar3</p> <div class="progress progress-striped active"> <div class="progress-bar"></div> </div> </div>

y esta es mi función JavaScript

 $( document ).ready(function() { $(".progress-bar").each(function (index ) { var percent = Math.floor((Math.random() * 37) + 60); $(this).html(percent+"%"); $(this).animate({width: percent+"%"}, 2500); if (percent<79){ $(this).addClass('progress-bar-danger'); } else if(parseInt(percent)<89){ $(this).addClass('progress-bar-warning'); } else{ $(this).addClass('progress-bar-success'); } }) });

Entonces, quiero que los datos generados aparezcan cada 5 o 10 minutos. no todas las páginas se actualizan, ¿cómo puedo hacerlo en función de mi secuencia de comandos? Gracias

Enlace de violín