Question

<div id="data_div">
    <!-- render content here, might take a while... -->
</div>
<div id="loading_div" style="background-color:cyan" >
    Loading, please wait...
</div>

I would like that “loading_div” overlap “data_div” to create the effect that loading is in progress, while what is really happening is that contents are being already rendered in the background. When the document is ready, then I can do something like

$(document).ready(function () {
    $("#loading_div").hide();
}

How can this be implemented with CSS and/or JQuery?

Answer 1

For #loading_div, assuming it’s not inside a wrapper or something (and preferably above #data_div in terms of your code):

#loading_div {
margin: 10%;
width: 80%;
height: 50%;
text-align: center;
opacity: 0.8;
z-index: 99;
background: black;
color: white;
display: block;
position: absolute;
padding-top: 30%;
}

#data_div {
 z-index: 0;   
    text-align: center;
}

Modify to taste…

http://jsfiddle.net/H2WWx/