Créer un Indicateur d’Activité en Rotation en JavaScript avec jQuery

Lorsque les utilisateurs interagissent avec des applications web, ils s’attendent souvent à un retour d’information immédiat. Si une tâche prend du temps à être traitée, il est crucial de faire savoir aux utilisateurs que l’application est toujours en cours d’exécution pour les garder engagés. C’est ici qu’un indicateur d’activité en rotation entre en jeu : un moyen simple mais efficace de montrer qu’une tâche de longue durée est en cours.

Le Besoin d’un Indicateur d’Activité

Imaginez que vous utilisiez une application web et que vous soumettiez un formulaire ou demandiez des données. Pendant que le système traite votre demande, cela peut prendre quelques secondes. Les utilisateurs peuvent s’inquiéter que l’application ait planté ou qu’il n’y ait pas de progrès. Un indice visuel, comme un cercle tournant, peut atténuer ces préoccupations.

Qu’est-ce qu’un Indicateur d’Activité en Rotation ?

L’indicateur d’activité en rotation est souvent appelé un indicateur d’activité Ajax. Cela signifie essentiellement qu’il indique un processus en arrière-plan ou un appel Ajax. Les utilisateurs ont pu rencontrer ces indicateurs dans de nombreuses applications, telles que :

• Chargement de nouveaux onglets dans des navigateurs web comme Firefox
• Écrans de démarrage dans des systèmes d’exploitation comme macOS
• Diverses applications web lorsqu’ils attendent des données

Comment Créer un Indicateur d’Activité en Rotation

Étape 1 : Trouver Votre Image de Spinner

La première étape pour implémenter un indicateur en rotation est d’acquérir l’image réelle. Vous pouvez facilement trouver de nombreux GIFs animés stylisés comme des spinners en effectuant une simple recherche Google pour “indicateur d’activité Ajax.”

Une excellente ressource pour des images de spinner est AjaxLoad. Ici, vous pouvez personnaliser et télécharger le design de spinner de votre choix.

Étape 2 : Préparer votre Structure HTML

Incluez l’image du spinner dans votre HTML à l’endroit où vous voulez qu’elle soit affichée. Par exemple, vous pouvez la placer à l’intérieur d’un élément <div> dans un tableau ou simplement comme un composant autonome :

<div id="spinner" style="display: none;">
    <img src="chemin_vers_votre_image_de_spinner.gif" alt="Chargement..." />
</div>

Étape 3 : Utiliser jQuery pour Basculer la Visibilité

Maintenant que vous avez votre HTML configuré, vous pouvez tirer parti de jQuery pour afficher ou cacher le spinner lorsqu’une tâche est initiée ou terminée. Voici un moyen simple de le faire :

$(document).ready(function() {
    $("#votreBouton").click(function() {
        $("#spinner").show(); // Afficher le spinner lorsque le bouton est cliqué
        
        // Simuler une tâche de longue durée avec setTimeout
        setTimeout(function() {
            $("#spinner").hide(); // Cacher le spinner après la fin de la tâche
        }, 3000); // Ajuster la durée si nécessaire
    });
});

Explication du Code :

• Afficher le Spinner : Lorsque une action spécifique est déclenchée (comme cliquer sur un bouton), la visibilité du spinner est changée pour l’afficher.
• Simuler la Tâche : À des fins de démonstration, une fonction setTimeout simule une tâche de longue durée. En pratique, c’est ici que votre appel Ajax serait fait.
• Cacher le Spinner : Une fois la tâche accomplie, le spinner est caché à nouveau.

En Conclusion

Implémenter un indicateur d’activité en rotation dans votre application web non seulement améliore l’expérience utilisateur, mais instille également la confiance dans le processus. En suivant les étapes décrites, vous pouvez créer un indice visuel engageant tout en veillant à ce que vos utilisateurs restent informés et rassurés que les tâches sont en cours.

N’hésitez pas à expérimenter avec différents designs de spinner et à les intégrer dans vos projets web. Bonne programmation !