I've successfully implemented a simple form that uses JQuery Ajax for submission. My goal now is to display a busy indicator, or "loader image," as an overlay on the entire form while it's being processed. Most examples I've come across only show how to display and hide a div containing the image, rather than creating an actual overlay effect over the form. So far, I've managed to display the loading indicator in the center of the screen using CSS. Here's the code for my div and its corresponding CSS:
<div id="spinner">
<img src="@Url.Content("~/images/loader.gif")" alt="Please wait...">
</div>
And here is the CSS styling:
<style>
div#spinner {
display: none;
position: fixed;
top: 50%;
left: 50%;
background: url(spinner.gif) no-repeat center #fff;
text-align: center;
padding: 10px;
font: normal 16px Tahoma, Geneva, sans-serif;
border: 1px solid #666;
margin-left: -50px;
margin-top: -50px;
z-index: 2;
overflow: auto;
}
</style>
The Ajax call might not be crucial for this issue, but here it is if needed:
$(function () {
$('#RegisterForm').submit(function () {
if ($(this).valid()) {
$("div#spinner").fadeIn("fast");
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
$("div#spinner").fadeOut("fast");
$("div#result").html(result);
}
});
}
return false;
});
});
Currently, the loader image appears in the center of the screen but does not act as an overlay on the form itself. My desired outcome is to have the loader image overlaid on the form only, adjusting to the size of the form dynamically at runtime without specifying a height. Is this possible? If so, how can it be achieved?