Bootstrap Progress Bar en consulta mysql

[xfxstudios]

Como ya te indicaron, debes engañar al sistema con javascript, ya que cuando tu html se ha cargado, el php lo ha hecho hace rato, podrias utilizar ajar y un par de funciones para simular la carga de los datos, pero en realidad estos ya estan cargados, solo que esperas a emitir la respuesta en la lista utilizando el sleep de php, por ejemplo:

el PHP de muestra:

Código PHP:

if($_GET['id']==1){
 
$ca = '';
 
for($i=0; $i<=10; $i++){
 
    $ca = $i;
    
 
}
 
echo "Esta es la Respuesta de PHP";
sleep(10);
}
 

Nuestro HTMl de Muestra:

Código HTML:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <button type="button" class="btn btn-primary" onClick="lista()">button</button>
</div>
 
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    
    <div class="progress">
        <div class="progress-bar progress-bar-striped" style="width: 0%">
            <span class="etiqueta"></span>
        </div>
    </div>
    <div id="respuesta"></div>
 
</div>
 

y nuestro script js:

Código Javascript:

var contador = 0;
  var fin = 10;
 
    function lista(){
 
        var id = setInterval("cuenta()",1000);
 
        $.ajax({
            url:     'directorio/controllers/muestra.php?id=1',
            type:     'get',
 
            success: function(data){
 
                clearInterval(id);
                $("#respuesta").html(data);
                
            }
        })
 
    }
    
    function cuenta(){
 
        contador = contador + 10;
        $(".progress-bar").css('width',contador+"%");
        $(".etiqueta").html(contador+"% Completado");
 
    }
 

de esta manera simulamos que se estan cargando los datos consultados, cuando en realidad lo que estamos es igualando la espera de nuestro sleep php con el contador, que a su vez acrecenta la barra.

Saludos