Thursday 22 May 2014

Show page loading effect while page loads

Today its fashion to show loading effect on page while page loads.
I am sharing a simple way to do this.

Attach any latest jquery on page to make this happen.

------CSS--------

<style type="text/css">
        #dvProgress
        {
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: none repeat scroll 0 0 #FFFFFF;
        }
    </style>

-------JAVASCRIPT--------


<script type="text/javascript">// <![CDATA[
        $(window).load(function () { $("#dvProgress").fadeOut("slow"); })
    // ]]>
    </script>

------------HTML----------

<div id="dvProgress">
            <img src="../Images/loading-circle.gif">
        </h2>
    </div>

That's it.

Enjoy scripting...