Jquery 引导页面加载进度条动画

我想将一个页面加载到一个div中，在加载页面时显示一个进度条（最好是稍微接近页面加载的实际进度），然后在加载页面后滑动该条并显示内容

当前事件链：

用户点击链接

进度条向下滑动

进度条为页面加载设置动画

进度条向上滑动

页面内容显示

代码：

如何修改此代码以匹配资源加载的实际进度

如何在内容出现之前滑动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');
                }); 
            }

如何修改此代码以匹配资源加载的实际进度

你不能只使用javascript

如何在内容出现之前滑动div

使用

$。改为获取
，因为它允许您在设置内容之前向上滑动：

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

如何将动画连接到加载函数
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);
    }); 
}