Spinner / Block UI

We use blockUI.js to show a spinner/loading screen, which also blocks the use of the page from the user. This is implemented by adding a beginRequest and endRequest to a page that has an <asp:UpdatePanel> on it. When a postback occurs, the beginRequest will automatically start, which runs a method called blockUI(). Upon completion, endRequest will run, which will run $.unblockUI().


<script type="text/javascript">
  //Blockui plugin...this causes the blockui to run
  //whenever the content is within an <asp:UpdatePanel>
  Page = Sys.WebForms.PageRequestManager.getInstance();

  function OnBeginRequest(sender, args) {
  function endRequest(sender, args) {

  //Center the element
  $.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
    return this;

  function blockUI() {
      css: {
        backgroundColor: 'transparent',
        border: 'none'
      message: '<div class="spinner"></div>',
      baseZ: 1500,
      overlayCSS: {
        backgroundColor: '#FFFFFF',
        opacity: 0.7,
        cursor: 'wait'
  }//end Blockui   
The `blockUI.js` file is available via the NuGet package. Additionally, it can be found here.