jquery之Bootstrap页面加载进度条动画

我想要将页面加载到 div 中，并在页面加载时显示进度条(最好稍微接近页面加载的实际进度)，然后在页面加载后向上滑动进度条并显示内容.

当前事件链:

1. 用户点击链接
2. 进度条向下滑动
3. 进度条随页面加载动画
4. 进度条向上滑动
5. 页面内容显示

代码:

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. 如何修改此代码以匹配资源加载的实际进度？
2. 如何在内容出现之前向上滑动 div？

=======编辑=======

使用下面答案中的代码，我只是在 get 函数调用之前将宽度设置为 80% 然后在成功调用中将其设置为 100%。向上滑动div，然后显示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'); 
                });  
            } 

请您参考如下方法:

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

你不能只用 javascript。

How can I slideUp the div before the content appears?

使用 $.get 代替，因为它允许您在设置内容之前向上滑动:

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