How to have AJAX trigger the browser's loading indicator

user_233345 0
Viewed 10227

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. the browser acts like it's loading (In FF the stop button becomes enabled, the progress bar appears), but it's not on a new page, it's done via AJAX.

How do they do this? I have a little spinny indicator, but it would be a nice touch to have the browser act like it's loading. Any ideas?

loading browser ajax
6 Answers

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.

user_20045320

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

user_2316750

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>

user_23355140
Related