ajax loader (spinner or progress bar) where to place it? [closed]

Question

I have a web page (web app ?) where users click on some buttons and we fire an ajax call which then eventually updates some elements of the page.

I am thinking of putting an indicator (spinner) of when an ajax call is kicked in... are there best practices to do this ?

I was thinking to put a spinner on the top/right corner of my app. ?

is that a good idea ? any resources where something like this is discussed ?

thanks

Answer 1

I recommend looking at this article for inputs on best practices for using ajax loading indicators. To quote the article

SIMPLE INDICATORS

Simple Ajax indicators provide a strong visual clue that request is in progress. They can be shown as simple text or as an image, usually animated.

• If it is in a text form, be sure to provide meaningful message, like “Sending email…”. Messages like “Waiting…” could confuse users. What am I waiting for? Is something wrong with the system?
• If it is an animated image they are usually represented by rotating animation.

With regards to positioning,the article has this to say:

POSITION : Whatever option you choose, you have to make sure that indicator is clearly visible. Depending on their purpose, indicators can be placed inside the same context as the element that started a request or they can be shown in a single position for all request.

To show an example of a well positioned loading indicator :

That said,the top\top right might not always be the correct position and the location of the load indicator should be where the content is being refreshed since the ajax call would only affect part of the page and not the whole page. Hence putting it the top when you are doing a ajax call to refresh an infinite scroll might not work and hence the placement should reflect the update as shown below.