How to Use Updateprogress control in asp.net for Image Loading

The following is the CSS for Image Loading using Updateprogress control

#overlay {

    position: fixed;

    z-index: 99;

    top: 0px;

    left: 0px;

    background-color: #f8f8f8;

    width: 100%;

    height: 100%;

    filter: Alpha(Opacity=90);

    opacity: 0.9;

    -moz-opacity: 0.9;

}           

#theprogress {

    background-color: #fff;

    border:1px solid #ccc;

    padding:10px;

    width: 300px;

    height: 55px;

    line-height:30px;

    text-align: center;

    filter: Alpha(Opacity=100);

    opacity: 1;

    -moz-opacity: 1;

}

#modalprogress {

    position: absolute;

    top: 40%;

    left: 50%;

    margin: -11px 0 0 -150px;

    color: #990000;

    font-weight:bold;

    font-size:14px;

}

Image for  Loading:

The following is the code for updateprogress control in asp.net

  <asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true" DisplayAfter="1" AssociatedUpdatePanelID="Updatepanel1">

    <ProgressTemplate>

        <div id="overlay">

            <div id="modalprogress">

                <div id="theprogress">

                    <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/Images/loading.gif" />

                    Please wait...

                </div>

            </div>

        </div>

    </ProgressTemplate>

</asp:UpdateProgress>