Showing Page Loader Using JQuery in ASP.NET

Sometimes our web pages get more time to load on the browser and block the UI portion of web page until the page is completely loaded. This makes the user confuse to what to do in that condition, if user try to click any control in web page, then the browser got in not responding (hanged condition) situation. So, Here I will decided to show a page loader on the screen to the user. until the page is loaded completely. This will intimate the user that page is loading and avoid any hanged situation of browser.

Add some css style.

<style>
#dvLoading
{
background: url(loader.gif) no-repeat center center;
height: 100px;
width: 100px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
}
.ui-widget-overlay
{
background: url(overlay.png) repeat;
left: 0;
opacity: 0.9;
position: absolute;
top: 0;
}
</style>

Here is the script for showing loading image.

$.fn.SetOverlayHeightWidth = function () {

$(this).height($(document).height());

$(this).width($(document).width());

};

$(document).ready(function () {

$(".overlayforaddNote").show().SetOverlayHeightWidth();

$('#dvLoading').fadeOut(4000);

setTimeout(function () { $(".overlayforaddNote").hide() }, 4000);

});

</script>

And at last UI block.

Output.