Question

I have a web app that has several tree views. When the page loads i see the unordered lists and after a small latency the styling of the tree is rendered into the DOM.

Is there a way to mask the webapp, and have a spinner in the middle of the screen, and when everything on the page is fully rendered the spinner goes away and the mask fades out? Kind of like a semi transparent mask that you would see on a lightbox pop-up dialog.

Answer 1

If it’s semi-transparent you’ll see the problem still. Add

<div id="loadingmask"></div>

before </body>. You might need to adjust its z-index if you have other z-indexes set.

CSS :

#loadingmask
{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    background:#000 url(yourspinner.gif) center no-repeat;

}

jQ // when everything else has been done

$('#loadingmask').fadeOut(500, function(){ $(this).remove(); });

​