How to have AJAX trigger the browser's loading indicator

Question

I\'m making an ajax-enabled lab scheduling program, and some of the ajax operations aren\'t exactly quick.

In Gmail, when you go to your inbox, send a message, etc.

Answer 1

I believe you want something like this.

I have added an API to pull geo location of github.com (not related, but I think it serves the purpose of sample API).

It's simple JavaScript and JQuery code to show/hide the loading indicator while making the AJAX request.

$('#btn').click(function() {
  $('#overlay').show();
  $.ajax('https://freegeoip.net/json/github.com').then(function(response) {
    $('#overlay').hide();
    $('#country').html(response.country_name);
  });
});

body {
  padding: 0;
  margin: 0;
}

#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  top: 0;
  background-color: rgba(255, 255, 255, 0.7);
}

.plus {
  display: flex;
  margin: 0 auto;
}

  

    
  



  Perform AJAX Operation
  

  Country: