Créer un loading en CSS

loading css

Actuellement, lorsque nous souhaitons faire patienter l’internaute en attendant que le contenu charge, nous utilisions des fichiers GIF de loading. En effet d’un point de vue UX, quand le chargement prends un peu de temps (quelques secondes) il est préférable d’afficher une image de loading que rien du tout. L’internaute est ainsi au courant que quelque chose va arriver.

Ancienne utilisation du GIF loading

Dans mon cas j’utilisais le célèbre icône GIF, que j’insèrais dans mon CSS via la balise background-image.

loader GIF
L’inconvénient est que nous chargeons une ressource en plus, et qu’il fallait avoir l’icône dans différentes taille en fonction de notre besoin.

La deuxième option a été d’utiliser un loading en base64 toujours via la propriété CSS background-image. Plus aucune ressource n’était chargée. Par contre insérer un base64 dans notre fichier CSS, rends un peu plus difficile sa lecture, comme vous pouvez le constater. Via la propriété zoom, il est possible d’agrandir ou diminuer la taille du GIF.

Exemple avec un zoom 1 et 0.5 :

Spinner loading full CSS

Une troisième option s’offre à vous, vous pouvez créer un icône loading plus customisable (couleur, taille, …) avec seulement du CSS et la propriété animation.
Voici par exemple ce qu’il est possible de faire :

La structure HTML n’est pas compliquée :

Voici maintenant le CSS :

Explication du code

La première partie .custom-loading-spinner::before permet de rajouter un overlay sur notre contenu. Il couvrira la totalité du contenu avec une opacité de 0.6. Voici le rendu :

loading css overlay

La deuxième partie .custom-loading-spinner::after génère notre cercle blanc avec un bord bleu. en utilisant les propriétés border et border-radius. On attribue une animation qui s’appelle custom-loading. Pour l’instant le bord bleu se trouve en haut (border-top) :

loading css sans animation

La dernière partie permet de définir de ce que va faire l’animation css. Dans notre cas nous allons animer notre cercle en lui appliquant une rotation de 360°, le bord bleu tournera. Sur la capture ci dessous vous constatez que le bord bleu se trouve sur la droite :

loading css animation


Commenter

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