title: How do I measure a loading time of an AJAX request and display a loading panel?
body: <p>I have here an AJAX request which can sometimes deal a very large json object. I want to display a loading panel which looks like this (in 45%): </p>
  
  <p><a href="https://i.stack.imgur.com/rw9ft.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rw9ft.jpg" alt="enter image description here"></a></p>
  
  <p>My problem is that I can't seem to measure how long the server is gonna process the json object sent from the AJAX. </p>
  
  <p>Here is my AJAX request:</p>
  
  <pre><code>$.ajax({
      url: './home/sumbit_json',
      type: 'POST',
      data: { 
        json_data: json_data, 
        user: user,
        entry: entry
      },
      dataType: 'json',
      success: function(data) {
        if (data.status == false) {
          alert("transaction failed");
        } else {
          alert("transaction successful");
        }
  
      }, // End of success function of ajax form
      error: function(xhr, status, errorThrown) {
        console.log("Error: " + errorThrown);
        console.log("Status: " + status);
        console.dir(xhr);
      },
  });
  </code></pre>