Add loading overlays to ASP.NET WebForms UpdatePanels

UpdatePanelLoaders.js

$(function(){
	//Get all the update panel requests
	var requests = Sys.WebForms.PageRequestManager.getInstance();

	//When an update panel begins to update
	requests.add_beginRequest(ShowPageLoader);

	//When an update panel completes loading
	requests.add_endRequest(HidePageLoader);
};

function ShowPageLoader(sender, args){
	//Add a loader on every update panel that is changing
	for (var i = 0; i < sender._updatePanelClientIDs.length; i++) {
		var panelId = sender._updatePanelClientIDs[i];
		var $updatedPanel = $("#"+panelId);

		//create and position an overlay
		var overlay=$("<div id='overlay_" + panelId + "' class='overlay' />").css({
			height : $updatedPanel.height(),
			width : $updatedPanel.width(),
			top : $updatedPanel.position().top,
			left : $updatedPanel.position().left
		});

		//create and position a loader
		var loader = $("<div id='loader_" + panelId + "' class='page-loader loading' />").css({
			left : $updatedPanel.position().left + ($updatedPanel.width() / 2),
			top : $updatedPanel.position().top + ($updatedPanel.height() / 2)
		});

		//Add them to the page and fade them in
		overlay.add(loader).insertBefore($updatedPanel).fadeIn(300);
	}
},
function HidePageLoader(sender, args){
	//Remove the loader from update panels that have finished loading
	for (var i = 0; i < sender._updatePanelIDs.length; i++) {
		var panelId = sender._updatePanelClientIDs[i];
		$("#loader_" + panelId  + ",#overlay_" + panelId).stop().fadeOut(300, function(){
			$(this).remove();
		});
	}
}

UpdatePanelStyles.css

.loading{
	background:url('../img/loading.gif') no-repeat 50% 50%;
	min-height:30px;
	min-width:30px;
}
.overlay{
	background-color:#FFF;
	position:absolute;
	display:none;
	z-index:2000;
	opacity:0.7;
	filter:Alpha(Opacity=70);
}
.page-loader{
	position:absolute;
	display:none;
	margin:-15px 0 0 -15px; /*Negative half the width and height of the loader so it can be correctly centered*/
	height:30px;
	width:30px;
	z-index:2001;
}

Keep in mind that this has no knowledge of an UpdatePanel nested within another UpdatePanel. If this occurs, you will most likely see the loader-overlays on top of one another.