Créer un icone de chargement en pur CSS3

Notez que cet article a été écrit pour la première fois il y a plus de 2 ans, mais n'est pas nécessairement obsolète.

Il est fréquent d’ajouter une image animée, le plus souvent en rotation, lors du chargement d’une page, ou lors de traitement aJax, afin d’attendre la réponse du serveur.

Cela améliore grandement l’expérience utilisateur, en montrant que le navigateur attend la réponse du serveur.

Cela peut se faire aisément avec des petits fichiers GIF. Des sites tels preloaders.net et ajaxload.info permettent de générer de tels fichiers.

Même si ces fichiers sont de petites tailles, s’ils ne sont pas en cache, il y aura un léger délai pour charger le fichier. Il est important que ce délai soit le plus court possible, surtout pour le chargement d’une page. D’autre part, les images animées de type GIF ne supportent pas la transparence, ce qui peut poser des problèmes selon la couleur du fond.

Une meilleure solution est l’utilisation de fichiers SVG, images vectorielles qui gèrent la transparence et dont le chargement est beaucoup plus rapide, comme sur ce site loading.io. Le format SVG utilise SMIL pour animer les éléments. Il faudra donc un navigateur moderne, tout comme l’utilisation des transitions et animations du CCS3, et oublier Internet Explorer.

Transitions et Animations CSS3
Transitions et Animations CSS3 pour animer un icone.

Grâce à CCS3 et les animations, fonctionnant sur les navigateurs modernes, on peut créer des icones de chargement sans image, réutilisables sur n’importe quel fond (en changeant juste la valeur des couleurs dans la feuille de style), ne demandant aucun chargement d’image.

Pour cela, on crée un élément: <div id=«xbs_loader»></div>.

On crée l’icone en CSS:

Le résultat donne ceci:

On peut ajouter un effet en ajoutant la propriété border-right: 0.

Il suffit alors d’animer cet icone. On peut ajouter une rotation et un effet sur l’opacité, par exemple:

 

 

Et hop, un loader rapide, facilement modifiable grâce aux animations du CCS3.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.