How to Use Updateprogress control in 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;
    width: 300px;
    height: 55px;
    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;

Image for  Loading:

The following is the code for updateprogress control in
  <asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true" DisplayAfter="1" AssociatedUpdatePanelID="Updatepanel1">
        <div id="overlay">
            <div id="modalprogress">
                <div id="theprogress">
                    <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/Images/loading.gif" />
                    Please wait...

1 comment: