Best "Loading" feedback for ASP.Net? - asp.net

Question

So, we have an ASP.Net application - fairly standard - and in there are lots of updatepanels, and postbacks.
On some pages we have
<ajax:UpdatePanelAnimationExtender ID="ae" runat="server" TargetControlID="updatePanel" BehaviorID="UpdateAnimation">
<Animations>
<OnUpdating>
<FadeOut Duration="0.1" minimumOpacity=".3" />
</OnUpdating>
<OnUpdated>
<FadeIn minimumOpacity=".5" Duration="0" />
</OnUpdated>
</Animations>
</ajax:UpdatePanelAnimationExtender>
Which basically whites out the page when a postback is going on (but this clashes with modal dialog grey backgrounds). In some cases we have a progressupdate control which just has a spinny icon in the middle of the page.
But none of them seem particularly nice and all a bit clunky. They also require a lot of code in various places around the app.
What methods do other people use and find effective?

Answer 1

i havent used the UpdatePanelAnimationExtender but an UpdateProgress-Control in combination with an animated gif(Bermos Link):
<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="UdpImeiLookup" DisplayAfter="500" >
<ProgressTemplate>
<div class="progress">
<img src="images/ajax-loader-arrows.gif" /> please wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
The ProgressTemplate will be visible on every Postback of the associated Update Panel(after 500ms in this example).
EDIT: where class "progress" can be f.e. this:
.progress
{
text-align:center;
vertical-align:middle;
position: absolute;
left: 44%;
top: 35%;
border-style:outset;
border-color:silver;
background-color:Silver;
white-space:nowrap;
padding:5px;
}
Regards,
Tim

Answer 2

Like the others, I suggest to use the UpdateProgress in a modal popup.
I will add this twist, put the popup, UpdateProgress and this code in a masterpage, so whenever you need it, just plug the masterpage to the content page.
<script type="text/javascript">
var ModalProgress ='<%= ModalProgress.ClientID %>';
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args){
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args)
{
// hide the Popup
$find(ModalProgress).hide();
}
</script>
here some ref:
http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html
http://vincexu.blogspot.com/2008/10/how-to-make-modalupdate-progress-bar-on.html

Answer 3

Animated gifs require the least amount of code and you can select your favourite one with whatever colours you please from the following site - Ajaxload - Ajax loading gif generator.

Answer 4

This is what I use, it has a modal popup type background and a gif
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
<ProgressTemplate>
<div style="position: absolute; width: 100%; height: 100%; z-index: 100; background-color: Gray;
filter: alpha(opacity=70); opacity: 0.7;">
</div>
<table style="position: absolute; width: 100%; height: 100%; z-index: 101;">
<tr>
<td align="center" valign="middle">
<div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
width: 200px;">
<asp:Image ID="Image3" runat="server" ImageUrl="~/Images/progress.gif" />
Please wait....
</div>
</td>
</tr>
</table>
</ProgressTemplate>