The way I would do this is via javascript.
Here is the basic idea.
When starting to load the page, set up a timer that refreshes an element (your loader), lets say, ever second.
While the page is loading (In this example it is an Iframe) the timers keeps filling up the loader.
When your page is loaded, you stop the timer and remove the loader element.
Here is a basic example on how to do this :
<html>
<head>
<title>Loader</title>
</head>
<script>
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading()
{
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
var t_id = setInterval(animate,60);
}
</script>
<style>
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:10px;
background-color:#FFCC66
}
#loader_container {
text-align:center;
position:absolute;
top:40%;
width:100%
}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:10px;
color:#000000;
background-color:#FFFFFF;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:135px;
border:1px solid #FFCC66;
text-align:left;
z-index:255;
}
#loader_bg {
background-color:#FCEACB;
position:relative;
top:8px;left:8px;height:7px;
width:113px;font-size:1px
}
</style>
<body>
<div id="loader_container"><div id="loader"><div align="center">Loading...</div>
<div id="loader_bg"><div id="progress"></div></div></div></div>
<iframe width="500px" height="500px" frameborder="0" onload="javascript:remove_loading();" src="http://www.msn.com" scrolling="no"></iframe>
</body>
</html>
This above example gives you an idea on the basics on how to do this.