I faced the same problem before.
You need to add this script inside body.
There are two functions like "InitializeRequest" and "EndRequest", which will be called when update panel begin updating and end updating respectively.
<script language="javascript" type="text/javascript">
<!--
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack()) {
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'btnEdit') {
$("#loadingImage").css('display', 'block');
$('#totalTable').css('opacity', '0.20');
$('#totalTable').css('filter', 'alpha(opacity=20)');
$('#totalTable').css('filter', '"alpha(opacity=20)"');
}
}
function EndRequest(sender, args) {
if (postBackElement.id == 'btnEdit') {
$("#loadingImage").css('display', 'none');
$('#totalTable').css('opacity', '1');
$('#totalTable').css('filter', 'alpha(opacity=100)');
$('#totalTable').css('filter', '"alpha(opacity=100)"');
}
}
</script>
<asp:updateprogress id="UpdateProgress1" runat="server" associatedupdatepanelid="UpdatePanel" xmlns:asp="#unknown">
<progresstemplate>
<table>
<tr>
<td style="width: 34%;">
</td>
<td id="loadingImage" style="display: none; removed 45%; opacity: 1; -moz-opacity: 1;<br mode=" hold=" /> filter: alpha(opacity=100); filter: 'alpha(opacity=100)'; position: fixed; top: 40%;">
<img id="Img1" alt="No Image" runat="server" src="~/img/progress_bar.gif" />
</td>
</tr>
</table>
</progresstemplate>
</asp:updateprogress>
This is just an example.
You can use the code and write what you want inside the "InitializeRequest" and "EndRequest" functions to accomplish your requirements.
Refer the link below for more information.
Programming UpdateProgress Controls in Client Script
Happy coding.....