Emad Ibrahim / Programming / AJAX, ASP.NET, Web Dev /

ASP.NET AJAX: Rendering a Gmail-like ‘Loading’ Indicator

Aug 4, 2007

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:

<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>

1
2
3
4
5
6
7
8
9

<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:

<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>; }

1
2
3
4
5
6
7
8
9
10

<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?