Here's a self-contained example that demonstrates this. I did not use jQuery at all; you can write this fully native in Visualforce. Feel free to replace any parts you don't like.
Controller
This code just waits approximately 3 seconds so you can see how the page loads.
public class LoadingDemo {
public void wait3Seconds() {
Long startTime = DateTime.now().getTime();
while(DateTime.now().getTime()-startTime<3000);
}
}
Page
We use apex:actionStatus to render a pretty animation while the page loads.
<apex:page controller="LoadingDemo">
<apex:form id="form">
<apex:actionFunction name="loadPageContent" action="{!wait3Seconds}" status="loading" reRender="form" />
This area hosts the main content. You can put whatever you want here.
</apex:form>
<apex:actionStatus id="loading">
<apex:facet name="start">
<div style="z-index: 1000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: black; opacity: 0.25">
</div>
<div style="z-index: 1001; text-align: center; vertical-align: middle; position: fixed; top: 50%; left: 50%; padding: 1em; margin: -2em -10em; width: 20em; height: 32px; background: white; border-radius: 5px">
<img src="/img/loading32.gif" style="vertical-align: middle; padding-right: 1em" />
Loading...
</div>
</apex:facet>
</apex:actionStatus>
<script>
loadPageContent();
</script>
</apex:page>