Bootstrap Page Load Progress bar animation

Question

Voglio avere una pagina caricata in un div e mentre la pagina sta caricando mostra una barra di avanzamento (preferibilmente in qualche modo vicino all'avanzamento effettivo del caricamento della pagina) e poi dopo che la pagina è caricata slideUp la barra e visualizza il contenuto.

catena corrente di eventi:

1. utente fare clic sui collegamenti
2. Progress Bar scivola giù
3. Progress Bar anima al caricamento della pagina
4. Barra di avanzamento scorre verso l'alto
5. Pagina contenuto visualizza

Codice:

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. Come potrei modificare il codice in modo che corrisponda l'avanzamento reale del carico delle risorse?
2. Come faccio a scorrere il div prima che il contenuto appaia?

======= ======= EDIT

Utilizzando il codice nella risposta qui sotto ho appena impostato la larghezza al 80% prima che la funzione get chiamata poi nel successo call impostalo al 100%. Fece scivolare il div e poi mostrata l'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

Come faccio a modificare il codice in modo che corrisponda l'avanzamento reale del carico delle risorse?

Non puoi con javascript.

Come faccio a scorrere il div prima che il contenuto appaia?

Usa $.get invece in quanto permette di far scorrere in su prima di impostare il contenuto:

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); 
    }); 
}