Instead of using ProgressBar plugin, I've below script to display the progress bar for async. requests on the page. Could anyone provide any feedback on this esp. if there will be any issues like cross browser compatibility, etc
<div class="overlay">
<div class="progress">
<img src="@Url.Content("~/content/images/loading.gif")" />Loading...
</div>
</div>
//displays progress bar
$('.overlay').ajaxStart(function () {
$(this).css({ height: $(document).height(), width: $(document).width() }).show();
$(this).find(".progress").css({ top: $(window).height() / 2, left: $(window).width() / 2 });
}).ajaxStop(function () {
$(this).hide();
});
.overlay
{
position: fixed !important;
position: absolute; /*ie6*/
width: 100%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: #000;
filter: alpha(opacity=20);
opacity: 0.2;
-moz-opacity: 0.2;
-khtml-opacity: 0.2;
-webkit-opacity: 0.2;
z-index: 10004;
display: none;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); /*ie6*/
}
.overlay .progress
{
position: absolute;
z-index: 10005;
background: #fff;
color: #000;
}