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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay" style="display:none">
  <div class="plus">
    <img src="https://loading.io/assets/img/landing/curved-bars.svg" alt="loading"/>
  </div>
</div>

<div>
  <button id="btn">Perform AJAX Operation</button>
  <div>
  Country: <span id="country"></span>
  </div>
</div>

Answer 2

The probable solution is to use iframe to trigger the loading. But based on previous answer, iframe method cannot work on chrome.

Your need is to show the loading icon on browser, so I think another way is to create fake loading icon.

You can update the browser icon manually. There are some tutorials about how to update browser icon.

And then, try to make icon animate. Most of browser doesn't support gif icon, so what you need to do is update icon in every few seconds.

This is demo code:

 var favicon_images = [];
 for (var i = 1; i <= 12; i++)
   favicon_images.push('./icon/' + i + '.png');

 var image_counter = 0;

 setInterval(function() {
     var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
     link.type = 'image/x-icon';
     link.rel = 'shortcut icon';
     link.href = favicon_images[image_counter];
     document.getElementsByTagName('head')[0].appendChild(link);

   if(image_counter == favicon_images.length -1)
         image_counter = 0;
     else
         image_counter++;
 }, 150);

I create a quick demo. Demo

With this demo, you can find that the icon animation doesn't run smoothly. That is because everytime we update the icon, browser request the icon again.

So transform the image to base64 format than it works smoothly.

Base64 demo

Now you just need to find the loading icon is the same with Chrome and other popular browsers, then trigger the fake loading when you call ajax.

---

Here I paste some change icon tutorial:

• https://gist.github.com/mathiasbynens/428626
• How to animate a favicon?

Answer 3

I found a related answer here: Browser continues 'loading' after ajax request finishes.

You can create an iframe and open and close its contentDocument which seems to start and stop the browser's native loading animation. See an example here: http://jsfiddle.net/KSXkS/1/.

Answer 4

Many users don't even understand or notice the browser's native loading indicators. If it is really a long running load the best user experience would be to indicate it as part of your web application. Remember context is king and this is an opportunity to communicate to your user what is going on and what functionality is still available.

If your entire user interface becomes invalid at the time of the request an overlay with a loading indicator is appropriate. A slightly opaque overlay communicates to the user without a disruptive break in vision.

If you simply need to show the request has started and is working, a spinner next to the button that started the request is best. On success, the spinner can be replaced with a green check mark or other common indicator that fades out after a short period.

These are common patterns found in many of google's applications.

Answer 5

I think this is your answer. (Reverse-AJAX or "Slow Load" technique from Obviously.com)

Looks like the GMail and Facebook method (browser is showing page as "loading" with loading icons etc. - it is just simulating, because there is a background ajax request) :)

Answer 6

This article has details about different types of requests and whether they trigger busy indicators like the progress bar.