title: How to add a loading screen when doing a AJAX call in Phonegap?
body: <p>Title pretty much says it. How do I add a loading screen when AJAX is running and make the loading screen disappear when it AJAX has finished running?</p>
  
  <p>My AJAX function:</p>
  
  <pre><code>$("#loginBtn").on("click", function(e){
  e.preventDefault();
  
  var loginForm = document.getElementById("loginForm");
  var login_data = $('#loginForm').serialize();
  
    $.ajax({
      type: "POST",
      url: serverURL + "loginProcess.php",
      data: login_data,
      dataType:"json",
      success: function(data){
        localStorage.setItem('id', JSON.stringify(data));
      },
      error:  function(jqXHR, textStatus, errorThrown) {
        navigator.notification.alert('Invalid Email or Password!',null,'Error', 'Done');  
      }
    }); 
  </code></pre>
  
  <p>});</p>
  
  <p>Note: I'm not using jQuery Mobile.</p>