Display gif image in when aspx page loads

//CSS


 div#example
        {
            display: none;
        }
       
        div#loading
        {
            text-align: center;
            cursor: wait;
        }



//Javascript Code

    <script type="text/javascript">// <![CDATA[
        function preloader() {
            document.getElementById("loading").style.display = "none";
            document.getElementById("example").style.display = "block";
        } //preloader
        window.onload = preloader;
// ]]></script>




//For loading gif Image
   <div id="loading">
        <div style="position: fixed; text-align: center; height: 800px; width: 98.5%; margin-top: 45px;
            z-index: 9999999; background-color: white; opacity: 0.6;">
            <asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/images/progress.gif"
                AlternateText="Loading ..." ToolTip="Loading ..." Style="padding: 10px; position: fixed;
                top: 45%; left: 50%;" />
        </div>
    </div>


    <div id="content" class="k-content" style="margin-top: 0px; border: 0px">//Actual html content place here
</div>