title: Display progress bar for asynchronous request using JQuery
body: <p>Instead of using ProgressBar plugin, I've used below script to display the progress bar for async. requests on the page. Could anyone provide feedback, if it is browser compatible, etc. I've raised this question on codereview last week but didn't get any response, so trying out here.</p>
  
  <pre><code>&lt;div class="overlay"&gt;
      &lt;div class="progress"&gt;
         &lt;img src="@Url.Content("~/content/images/loading.gif")" /&gt;Loading...
      &lt;/div&gt;
  &lt;/div&gt;
  
  //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;
  }
  </code></pre>