You can use jquery BlockUI for this. Link to Demo. This should work for all your cases (full postback and partial postback).
Add event handlers for beginRequest and endRequest of PageRequestManager.
In the BeginRequestHandler you can start displaying the loading indicator with your customized settings and in the EndRequestHandler you hide the loading indicator. If you don't want to block the whole page then this plugin has option to show the loading indicator for an element (eg. within a div in the page, refer the demo page)
<script type="text/javascript">
function pageLoad(sender, args) {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
}
function BeginRequestHandler(sender, args) {
showLoadingUI();
}
function EndRequestHandler(sender, args) {
$.unblockUI();
}
function showLoadingUI() {
$.blockUI({
message: '<h3><img src="../images/ajax-loader.gif" /> <br /> <span style="font-family: Tahoma,Verdana,Arial, Sans-Serif; font-size: 12px; color: #1390c6;"> Loading...</span></h3>',
showOverlay: true,
css: {
width: '130px', height: '110px',
border: 'none',
padding: '10px',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .9
}
});
}
</script>
Also remember to reference the jquery and the blockui plugin scripts from either CDN or from your local application.
<script type="text/javascript" src="jquery1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
