Ajax preloading/loading animation using jQuery BlockUI

This tutorial shows you how to block/disable your web page whenever an application is processing an ajax request. First, you would have to download the latest jQuery library and the jQuery BlockUI plugin. Usage is very simple; Here’s a sample to block user activity for the page whenever an ajax request is called:

<script type="text/javascript" src="jquery-latest.js" language="javascript"></script>
<script type="text/javascript" src="jquery.blockui.js" language="javascript"></script>
<script type="text/javascript" language="javascript">
<!--
	$(document).ready( function () {
		<!-- Page block animation during ajax requests -->
		$().ajaxStart($.blockUI).ajaxStop($.unblockUI);		

		$('#form_button').click( function () {
			$.ajax({
			<!-- Ajax actions here -->
				....
			});
		});
	});
-->
</script>

For more options on using jQuery BlockUI plugin go here