display gif image in when Button click in update panel

<asp:UpdatePanel ID="upDateSelection" runat="server">
                                <ContentTemplate>
                                    <asp:UpdateProgress ID="updateProgress" runat="server">
                                        <ProgressTemplate>
                                            <div style="position: fixed; text-align: center; height: 800px; width: 80%; margin-top: 45px;
                                                margin-right: 50px; left: 20px; 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>
                                        </ProgressTemplate>
                                    </asp:UpdateProgress>
                                    <telerik:RadButton ID="rbDateSelection" runat="server" Text="Submit" Width="100"
                                        CssClass="rdbutton" OnClick="rbDateSelection_Click" OnClientClicked="InvalidDates">
                                    </telerik:RadButton>
                                </ContentTemplate>
                            </asp:UpdatePanel>

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>