When users interact with your web page and processes, it is important to provide them with continuous feedback. Without the feedback, a user is left wondering if you page is actually processing work, frozen, or just not working. This is especially true when incorporating Ajax requests that take more than a few seconds for the process to complete successfully.
For this reason, you will find that "spinners" or "progress bars" are used to display what seems to be the browser performing some work in the background. In reality, all that is really happening behind the scenes is that the web page is displaying some type of animation. Once the process is completed, the animation should be hidden on the page.
Fortunately, there is a great project availabe called spin.js which makes it very easy to incorporate this type of spinner in your web pages. You can even customize your spinner (size, color, etc...). Bigtime kudos to Felix Gnass. I have never used an animated GIF again after I started incorporating spin.js into my pages.
The code snippet provided here is a simple example of how to use a spinner during an Ajax request, but the example is not complete. The jQuery Ajax method used is just a sample. You will have to modify it for your needs. However, I have developed a working example on JSFiddle.net so you can see a demo. The JSFiddle simulates an Ajax Request with a 3 second delay.
In this example, we are applying this to an Ajax Request. However, you will find that you can incorporate this for links, and other elements that you use to interact with your users.
The process is the same regardless of the element used.
-Show the spinner
-On success, hide the spinner