I have a lenghty ASP.NET page load process.
Is there a way to display a loading gif while the ASP.NET page loads?
Obviously I can't use an image on the page itself, and when I fiirst load a "dummy page" with the "Loading..." picture, that page is discarded as soon as I redirect the user to the real page...
Any clue? Thanks
You can use an UpdateProgress control for this, like this:
<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
<ProgressTemplate>
<div id="overlay">
<div id="modalprogress">
<div id="theprogress">
<asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="/images/wait.gif" />
Please wait...
</div>
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Here are some styles you can use if you want it to be semi-transparent:
#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: 30px;
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;
}