Question

My webpage takes anywhere from .5sec – 3 seconds to load completely. I was just wondering if there was a way to have an overlay to show in till the page was loaded. When the page finished loading, I would want this overlay to hide. Something like a progress bar or a .gif. I’m using the razor engine in MVC3.

Answer 1

Three things I have done to make this work: PS, Sorry for poor code blocks, new to all of this.

HTML Div:

<div id ="blocker">
<div>Loading...</div></div>

CSS:

#blocker{position: fixed;


top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1000;  
opacity: 0.3;  
display: none;

}

#blocker div   
    { position: absolute;
    top: 50%;
    left: 50%;
    width: 5em;
    height: 2em;
    margin: -1em 0 0 -2.5em;
    color: #fff;
    font-weight: bold;
}

JQuery before the Ajax gets called:

$("#blocker").show();

    $.ajax`