Bootstrap Page Load Progress bar animation

Question

Quiero tener una página cargada en un div y mientras la página se está cargando mostrar una barra de progreso (preferiblemente algo cerca del progreso real de la carga de la página) y luego cargar la página la barra y mostrar el contenido.

cadena actual de los acontecimientos:

1. usuario haga clic en vínculos
2. barra de progreso se desliza hacia abajo
3. Barra de progreso anima a cargar la página
4. barra de progreso se desliza hacia arriba
5. muestra la página de contenido

Código:

function pageLoad(url){ 
    $('body').css('cursor','wait'); 
    $('#page-load-wrap').slideDown(); 
    width = $('#page-load-indicator').css('width','100%'); 
    $('#mainframe').load(url,function(){ 
     $('#page-load-wrap').slideUp(); 
     $('body').css('cursor','default'); 
    }); 
} 

1. ¿Cómo podría modificar este código para que coincida con el progreso real de la carga de recursos?
2. ¿Cómo puedo hacer slideUp el div antes de que aparezca el contenido?

======= ======= EDITAR

Usando el código en la respuesta a continuación me acaba de establecer el ancho a 80% antes de la llamada función get a continuación en el éxito Llamarlo configúrelo al 100%. Se deslizó el div y luego se muestra el html

 function pageLoad(url){ 
       $('body').css('cursor','wait'); 
       $('#mainframe').html(''); 
       $('#page-load-wrap').slideDown(); 
       $('#page-load-indicator').css('width','80%'); 

       $.get(url,function(data){ 
       $('#page-load-indicator').css('width','100%'); 
       $('#page-load-wrap').slideUp('slow',function(){ 
        $('#mainframe').html(data); 
       }); 
       $('body').css('cursor','default'); 
       }); 
      } 

Answer 1

¿Cómo podría modificar este código para que coincida con el progreso real de la carga de recursos?

No puede con javascript.

¿Cómo puedo deslizar hacia arriba el div antes de que aparezca el contenido?

Uso $.get lugar, ya que permite que se deslice hacia arriba antes de ajustar el contenido:

function pageLoad(url){ 
    $('body').css('cursor','wait'); 
    $('#page-load-wrap').slideDown(); 
    width = $('#page-load-indicator').css('width','100%'); 

    $.get(url,function(data){ 
     $('#page-load-wrap').slideUp(); 
     $('body').css('cursor','default'); 

     // and load the html 
     $('#mainframe').html(data); 
    }); 
}