Pages

Friday, 7 June 2013

Fade background screen while loading

CSS:-

<style>
   .overlay 
{
position: fixed;
background-image:url('../images/loadingnew.gif');
background-repeat:no-repeat;
background-position:center;
background-color:Black;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0.2;
-moz-opacity: 0.2;
filter: alpha(opacity=20);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
z-index: 10000;
}
</style>


Now at your design page just use a Update Progress like this- 

  <asp:UpdateProgress ID="UpdateProgress2" runat="server" DynamicLayout="true">
          <ProgressTemplate>
               <div class="overlay"></div>
          </ProgressTemplate>
        </asp:UpdateProgress>

Don't forget to declare ScriptManager in your design page, and place your controls in UpdatePanel.
On the click event of button use this code-

        System.Threading.Thread.Sleep(2000);




No comments:

Post a Comment