If a form submit takes long time due to any underground operations such as executing heavy database queries, XML parsing, etc , you may need to show the user that some processing is going on. Studies shows that average maximum waiting time of an website user is 10 seconds before he will dispose the page or try to do something. Well we don't need that. At old days we used to show a hour glass animation to do this, but nowadays spinner is quite popular.
Simplest way to do this is, creating a div and put a <img> control inside of the div and set its source to a gif image of a spinner. It works out in most of the browsers but unfortunately not in IE 9 or in any older IE versions. Then I found out about spin.js which works in all major browsers, even in IE6. So instead of placing a gif in the div, I targeted that div for the spinner.
Reference to spin.js libaray -
<script type="text/javascript" src="@Url.Content("~/Content/spin.min.js")"></script>
HTML for loading div -
<div id="processing">
<div id="content">
<p id="loadingspinner">
Creating SPs...
</p>
</div>
</div>
CSS styling -
#processing
{
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.6);
z-index: 1000;
}
#content
{
display: table;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#loadingspinner
{
display: table-cell;
vertical-align: middle;
width: 100%;
text-align: center;
font-size: larger;
padding-top: 75px;
}
Script to show div when proceed button clicked -
$(function () {
$("#proceedButton").click(function () {
$("#processing").fadeIn();
});
});
Script to display the spinner to indicate loading -
$(function () {
$("#proceedButton").click(function () {
$("#processing").fadeIn();
var opts = {
lines: 12, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false // Whether to use hardware acceleration
};
var target = document.getElementById('processing');
var spinner = new Spinner(opts).spin(target);
});
});
That's it. Works like magic.. ;)
But if you wan't to show the spinner when you are doing some work through a ajax postback, found a nice little article to achieve that too.
