well i am to tired to write the code out , but the logic is , have a set of tags (div for me) that have the image inside , and use JS to hide the rest of the page (that needs to be in tags, div) e.g.
<html>
<script type="text/javascript">
document.getElementById('main').style.visibility="hidden";
function loading()
{
document.getElementById("main").style.visibility="visible";
document.getElementById('loader').style.visibility="hidden";
document.getElementById('loader').style.marginTop="0%";
document.body.style.backgroundColor="#CCCCCC";
document.getElementById('loader').innerHTML = ' ';
}
</script>
<style type="text/css">
body
{
visibility:hidden;
background-color:#000000;
}
</style>
<body onLoad="loading()">
<div id="loader" align="center" class="test">
<h1>Loading</h1>
<br /><img src="loading.gif" alt="loading" align="absmiddle">
</div>
<div align="center" id="main">
Main stuff
</div>
</body>
</html>