Showing loading animation in center of page while making a call to Action method in ASP .NET MVC

My application makes several calls to an Action method (ASP .NET MVC) which returns a Json object. When the application is waiting for this method to return its data I want to display a loading animation in the center of the page. How would I accomplish this? I know that I should use JQuery but that's all I know.

From stackoverflow

• You can do this by displaying a div (if you want to do it in a modal manner you could use blockUI - or one of the many other modal dialog plugins out there) prior to the request then just waiting until the call back succeeds as a quick example you can you $.getJSON as follows (you might want to use .ajax if you want to add proper error handling)

  $("#ajaxLoader").show(); //Or whatever you want to do
  $.getJSON("/AJson/Call/ThatTakes/Ages", function(result) {
      //Process your response
      $("#ajaxLoader").hide();
  });
  

  If you do this several times in your app and want to centralise the behaviour for all ajax calls you can make use of the global AJAX events:-

  $("#ajaxLoader").ajaxStart(function() { $(this).show(); })
                 .ajaxStop(function() { $(this).hide(); });
  

  ---

  Using blockUI is similar for example with mark up like:-

  <a href="/Path/ToYourJson/Action" id="jsonLink">Get JSON</a>
  <div id="resultContainer" style="display:none">
  And the answer is:-
      <p id="result"></p>
  </div>
  
  <div id="ajaxLoader" style="display:none">
      <h2>Please wait</h2>
      <p>I'm getting my AJAX on!</p>
  </div>
  

  And using jQuery:-

  $(function() {
      $("#jsonLink").click(function(e) {
          $.post(this.href, function(result) {
              $("#resultContainer").fadeIn();
              $("#result").text(result.Answer);
          }, "json");
          return false;
      });
      $("#ajaxLoader").ajaxStart(function() {
                            $.blockUI({ message: $("#ajaxLoader") });
                       })
                      .ajaxStop(function() { 
                            $.unblockUI();
                       });
  });
  

• I defined two functions in Site.Master:

      <script type="text/javascript">
      var spinnerVisible = false;
      function showProgress() {
          if (!spinnerVisible) {
              $("div#spinner").fadeIn("fast");
              spinnerVisible = true;
          }
      };
      function hideProgress() {
          if (spinnerVisible) {
              var spinner = $("div#spinner");
              spinner.stop();
              spinner.fadeOut("fast");
              spinnerVisible = false;
          }
      };
  </script>
  

  And special section:

      <div id="spinner">
          Loading...
      </div>
  

  Visual style is defined in CSS:

  div#spinner
  {
      display: none;
      width:100px;
      height: 100px;
      position: fixed;
      top: 50%;
      left: 50%;
      background:url(spinner.gif) no-repeat center #fff;
      text-align:center;
      padding:10px;
      font:normal 16px Tahoma, Geneva, sans-serif;
      border:1px solid #666;
      margin-left: -50px;
      margin-top: -50px;
      z-index:2;
      overflow: auto;
  }