ASP.NET AJAX: Rendering a Gmail-like ‘Loading’ Indicator
Here is an interesting article on how to display Gmail-like progress indicator: Matt Berseth: ASP.NET AJAX: Rendering a Gmail-like ‘Loading’ Indicator over a Specific ASP.NET Control
But I have a much easier method to do that, which I use in www.yongazonga.com:
First, add your UpdateProgress control like this:
123456789 <span style="color: #0000ff"><</span><span style="color: #a31515">asp</span><span style="color: #0000ff">:</span><span style="color: #a31515">UpdateProgress</span> <span style="color: #ff0000">ID</span><span style="color: #0000ff">="UpdateProgress2"</span> <span style="color: #ff0000">runat</span><span style="color: #0000ff">="server"</span><span style="color: #ff0000">AssociatedUpdatePanelID</span><span style="color: #0000ff">="pnlNewUser"</span> <span style="color: #ff0000">DisplayAfter</span><span style="color: #0000ff">="0"</span> <span style="color: #ff0000">DynamicLayout</span><span style="color: #0000ff">="True"></span> <span style="color: #0000ff"><</span><span style="color: #a31515">ProgressTemplate</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #a31515">div</span> <span style="color: #ff0000">class</span><span style="color: #0000ff">='progresspanel'></span> Loading...<span style="color: #0000ff"></</span><span style="color: #a31515">div</span><span style="color: #0000ff">></span> <span style="color: #0000ff"></</span><span style="color: #a31515">ProgressTemplate</span><span style="color: #0000ff">></</span><span style="color: #a31515">asp</span><span style="color: #0000ff">:</span><span style="color: #a31515">UpdateProgress</span><span style="color: #0000ff">></span>
And then apply this style to the div:
12345678910 <span style="color: #a31515">.progresspanel</span>{<span style="color: #ff0000">background-color</span>: <span style="color: #0000ff">RED</span>;<span style="color: #ff0000">color</span>: <span style="color: #0000ff">White</span>;<span style="color: #ff0000">top</span>: <span style="color: #0000ff">1px</span>;<span style="color: #ff0000">color</span>: <span style="color: #0000ff">white</span>;<span style="color: #ff0000">position</span>: <span style="color: #0000ff">absolute</span>;<span style="color: #ff0000">right</span>: <span style="color: #0000ff">16px</span>;<span style="color: #ff0000">z-index</span>: <span style="color: #0000ff">999</span>;}
Do you have a better/easier way of doing this?