Question

I want to have a page loaded into a div and while the page is loading display a progress bar ( preferably somewhat close to the actual progress of the page load ) and then after the page is loaded slideUp the bar and display the content.

Current chain of events:

1. User Click Links
2. Progress Bar Slides Down
3. Progress Bar Animates to Page Load
4. Progress Bar Slides Up
5. Page Content Displays

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. How would I modify this code to match the actual progress of the resource load?
2. How can I slideUp the div before the content appears?

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

Using the code in the answer below I just set the width to 80% before the get function call
then in the success call set it to 100%. Slid the div Up and then displayed the 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

How would I modify this code to match the actual progress of the resource load?

You cant with just javascript.

How can I slideUp the div before the content appears?

Use $.get instead since it allows you to slide up before setting the content:

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