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

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

目前的事件链：

>用户点击链接
>进度条滑落
>进度条动画到页面加载
>进度条滑动
>页面内容显示

码：

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

>我如何修改此代码以匹配资源加载的实际进度？
>如何在内容出现之前滑动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');
                }); 
            }

function pageLoad(url){
    $('body').css('cursor','100%');

    $.get(url,function(data){
        $('#page-load-wrap').slideUp();
        $('body').css('cursor','default');

        // and load the html
        $('#mainframe').html(data);
    }); 
}