The easiest approach is to use
jQuery
or
Javascript
to disable any / all elements within your page after your Button was clicked and display your image. I'll provide a very basic example using the
jQuery
library below :
<!-- Example jQuery Script -->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript'>
$(function(){
$(':button,:submit').click(function(){
$('*').prop('disabled',true);
$('body').append("<img style='top: 45%; position: absolute; height: 100px; width: 100px;background: black;left: 45%;' src='http://www.klk.com.my/wp-content/themes/klk/images/loading-ajax.gif' />");
});
});
</script>
As an alternative, you can try something like this as well:
<div id="divWait" style="position:absolute;left:50%; top:50%; margin:-100px 0 0 -150px; display:none;">
<div style="text-align:center; width:300px; height:70px; background-color:#000; color:#fff;">
Processing....
<br/>
<!--Your GIF image here-->
</div>
</div>
<div id="divHolder">
<!--Put your content here and form elements-->
</div>
<asp:LinkButton ID="lnkSave" runat="server" CssClass="lnkSave" />
<script type="text/javascript">
$(".lnkSave").live("click",function(){
$("#divHolder").attr('disabled',true);
$("#divWait").css({'display': 'block'});
});
</script>