Jquery – Bootstrap Page Load Progress bar animation

animationjquerytwitter-bootstrap

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:

User Click Links
Progress Bar Slides Down
Progress Bar Animates to Page Load
Progress Bar Slides Up
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');
    }); 
}

How would I modify this code to match the actual progress of the resource load?
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');
                }); 
            }

Best Answer

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

The Setup

Let's start by getting us a nice "loading" animation from http://ajaxload.info I'll be using enter image description here

Let's create an element that we can show/hide anytime we're making an ajax request:

<div class="modal"><!-- Place at bottom of page --></div>

The CSS

Next let's give it some flair:

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .modal {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

And finally, the jQuery

Alright, on to the jQuery. This next part is actually really simple:

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
     ajaxStop: function() { $body.removeClass("loading"); }    
});

That's it! We're attaching some events to the body element anytime the ajaxStart or ajaxStop events are fired. When an ajax event starts, we add the "loading" class to the body. and when events are done, we remove the "loading" class from the body.

See it in action: http://jsfiddle.net/VpDUG/4952/

Javascript – Get the size of the screen, current web page and browser window

You can get the size of the window or document with jQuery:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

For screen size you can use the screen object:

window.screen.height;
window.screen.width;

Best Answer

Related Solutions

Jquery – How to create a “Please Wait, Loading…” animation using jQuery

The Setup

The CSS

And finally, the jQuery

Javascript – Get the size of the screen, current web page and browser window

Related Topic