Beaucoup d’applications Web utilisent des animations, telles que des roues tournantes (souvent appelées « spinner ») pour faire patienter l’utilisateur pendant un traitement. Par exemples:

Une animation de chargement est importante pour signaler à l’utilisateur que l’application est toujours en train de faire quelque chose et que l’utilisateur doit attendre qu’une action se termine.

L’utilisation de la librairie Ajax jQuery permet de créer assez facilement une animation de chargement qui s’affichera lorsqu’une requête Ajax est lancée.

Voici comment procéder:

1. Avant tout, vous avez besoin d’une GIF animée. Vous pouvez en récupérer une gratuite sur http://ajaxload.info

Incluez une DIV contenant l’image sur la page de votre application. Typiquement vous allez ajouter cette DIV dans une fichier de mise en forme ou dans le header de votre page.

The attribute style=”display:none;” makes the div invisible when the page is loaded.
You can style the div whatever you like using the class “spinner”. I decided that I wanted the div to be centered in the middle of the screen on top of the rest of the page.


.spinner {
position: fixed;
top: 50%;
left: 50%;
margin-left: -50px; /* half width of the spinner gif */
margin-top: -50px; /* half height of the spinner gif */
text-align:center;
z-index:1234;
overflow: auto;
width: 100px; /* width of the spinner gif */
height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}
To show the spinner automatically when an Ajax request is running, add the following jQuery javascript code to every page by including it to a layout file or header.

This will show the loading animation when an Ajax requests starts and hide it automatically when the Ajax request is complete or when an error occurs.

Additionally, it is possible to use the spinner for normal, non-Ajax requests.
An example for this would be an ordinary file upload. If you use plain html, uploading a file does not trigger an Ajax request so your spinner wouldn’t be visible automatically.

In your file upload form, give the submit button an html ID, e.g. buttom-upload. Now include the following jQuery javascript code to show the spinner when the form is submitted:
1
2
3
4
5
6
7

You do not have to hide the spinner, because when the request completes, a new page is rendered where the spinner is not visible.