You will need an image, first. Go to ajaxload.info and get one you like.

Put the html for the loader in the page.

[sourcecode language="html"]
<div id="spinner">
<img src="/jobadmanager/Content/images/ajax-loader-big.gif" alt="Loading..."/>
</div>
[/sourcecode]

Style the div element to position it on the centre of the browser.

[sourcecode language="css"]
<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>
[/sourcecode]

Now, use javascript to fade it in and out, when an ajax request starts.

[sourcecode language="javascript"]
<script type="text/javascript">
$('#spinner').ajaxStart(function () {
$(this).fadeIn('fast');
}).ajaxStop(function () {
$(this).stop().fadeOut('fast');
});

</script>
[/sourcecode]

Reference: http://stackoverflow.com/questions/807408/showing-loading-animation-in-center-of-page-while-making-a-call-to-action-method


Andrew Chaa

another day, another PR