Bootstrap. Page loading.

Question

I want the page to load in a div, and while the page is loading, a progress bar is displayed (preferably a little close to the actual progress of loading the page), and then after loading the page, it moves the panel and displays the content.

Current event chain:

• Custom links for links
• Progress bar slide down
• The progress bar is animated when the page loads.
• Progress bar moves up
• Display page content

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

• How can I change this code in accordance with the actual progress of loading a resource?
• How can I move the div before the content appears?

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

, 80% get 100%. div Up 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

?

javascript.

div ?

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