Now, use javascript to show it in and hide, when an ajax request starts.
<script type="text/javascript">
$(document).ajaxStart(function () {
$('#spinner').show();
}).ajaxStop(function () {
$('#spinner').hide();
});
</script>
Style the div element to position it on the centre of the browser.
<style>
div#spinner
{
display: none;
width:100px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
text-align:center;
margin-left: -50px;
margin-top: -100px;
z-index:2;
overflow: auto;
}
</style>
Put the html for the loader in the page.
<div id="spinner">
<img src="~/Images/googleLarge.gif" alt="Loading..."/>
</div>
Hope this help you !