Display a loading gif image before a page loads using javascript and Css

Have you ever need to showing a loading image before bage loading?Like this demo.

to do that at first we well need a CSS like below

div#content {
    display: none;

div#loading {             
    top: 200 px;
    margin: auto;
    position: absolute;
    z-index: 1000;
    width: 160px;
    height: 24px;
    background: url(loadingimage.gif) no-repeat;
    cursor: wait;                

Then we will add id of div into it

<div id="loading"></div>
<div id="content">
your content here...

Then add the following javascript code into head section of your html page.

<script type="text/javascript">
        function preloader(){
            document.getElementById("loading").style.display = "none";
            document.getElementById("content").style.display = "block";
        window.onload = preloader;

You can check demo.


Leave a Reply

Your email address will not be published. Required fields are marked *