Bootstrap Page Load Progress bar animation

Question

Je souhaite qu'une page soit chargée dans une div et que pendant le chargement de la page, une barre de progression soit affichée (de préférence assez proche de la progression réelle du chargement de la page) et qu'une fois la page chargée, la barre s'efface et le contenu s'affiche.

Chaîne d'événements en cours :

1. Liens cliquables par l'utilisateur
2. La barre de progression glisse vers le bas
3. La barre de progression s'anime au chargement de la page
4. La barre de progression glisse vers le haut
5. Le contenu de la page s'affiche

Code :

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. Comment modifier ce code pour qu'il corresponde à la progression réelle du chargement des ressources ?
2. Comment puis-je faire glisser la div avant que le contenu n'apparaisse ?

\=======EDIT=======

En utilisant le code dans la réponse ci-dessous, j'ai simplement fixé la largeur à 80 % avant l'appel à la fonction get. puis, lors de l'appel à la fonction "success", je la fixe à 100 %. J'ai fait glisser la div vers le haut et j'ai affiché le code 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

Comment modifier ce code pour qu'il corresponde à la progression réelle du chargement des ressources ?

Vous ne pouvez pas utiliser uniquement le javascript.

Comment puis-je faire glisser la div avant que le contenu n'apparaisse ?

Utilice $.get car il vous permet de glisser vers le haut avant de définir le contenu :

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