Try using Jquery
First create a div element and assign an ID to it. I have assigned ID as "dvLoading". This div element will be used to show the loading icon.
1
Now create a style which will be applied to the div element. Basically, this CSS style will set the div position in the middle of the page and also assign width and height. And the background of the div will be an loading gif image.
01
#dvLoading
02
{
03
background:#000 url(images/loader.gif) no-repeat center center;
04
height: 100px;
05
width: 100px;
06
position: fixed;
07
z-index: 1000;
08
left: 50%;
09
top: 50%;
10
margin: -25px 0 0 -25px;
11
}
Now, comes the jQuery part. The div element will be always visible but we need to hide it as soon as our page is loaded completely. In this case, we can't use $(document).ready() to show the loading div. Read here why? Therefore, we need to use window.load event to hide the loading div element. Remember to put this code before closing head tag.
1
<script>
2
$(window).load(function(){
3
$('#dvLoading').fadeOut(2000);
4
});
5
</script>
That's it!!!!!