Loader CSS : comment animer le chargement d'une page web ? 9 exemples

Le web va très vite et les internautes s'y sont habitués, devenant de plus en plus exigeants. Parfois néanmoins, même les meilleurs développeurs ne parviennent pas à supprimer les quelques instants d'attente pendant le chargement d'un élément ou d'une page web. Dans ce cas, une animation agrémente le bref temps d'attente. Le langage CSS permet de créer des loaders très efficaces et populaires, de type barre de progression ou engrenage. Des développeurs expérimentés font avec CSS des animations plus sophistiquées.

Quel est l'intérêt d'ajouter une animation de chargement de page ?

Quand un internaute clique sur un élément cliquable d'une page web, un bouton ou un lien de redirection par exemple, il s'attend à ce que quelque chose se produise. Lorsque le chargement de la page ou de l'élément prend du temps, sans que rien ne se passe, cela peut être déroutant, voire contrariant. Ajouter une animation de chargement, également appelé loader CSS, rassure d'une part, fait patienter d'autre part.

• L'animation de chargement de page est en mouvement : le loader CSS attire et retient l'attention de l'internaute, qui patiente plus favorablement. Éviter ainsi que le visiteur quitte le site présente un intérêt commercial évident.
• Par convention, de nombreux sites web utilisent des loaders CSS. Ajouter ce type d'animation sur son site est un gage de professionnalisme, qui bénéficie à l'image de marque ainsi qu'à l'expérience utilisateur.

On parle de loader CSS car l'animation de chargement est codée en langage CSS. Le développeur qui souhaite intégrer un loader a intérêt à privilégier ce langage, afin de ne pas alourdir le site. Pour faciliter son travail, il peut se baser sur des morceaux de code de loaders CSS populaires, qu'il personnalise. Les IA génératives sont également de bonnes bases de travail.

Exemples de loaders en CSS

Les points de suspension

Les points de suspension sont répandus pour représenter un loader CSS. Cette animation CSS peut revêtir plusieurs formes : des points qui s'agrandissent puis rétrécissent l'un après l'autre, et des points qui montent et qui descendent l'un après l'autre, par exemple.

See the Pen loader-CSS_points-suspension by HubSpot France (@HubSpot-France) on CodePen.

La roue en mouvement

La roue en mouvement, comme les points de suspension, fait partie des animations de chargement populaires. Il en existe une multitude de variantes, pour être conforme à la charte graphique de la marque.

See the Pen loader-CSS_roue-chargement by HubSpot France (@HubSpot-France) on CodePen.

Les points en mouvement

Les points en mouvement combinent deux animations emblématiques du chargement de page : les points de suspension et la roue en mouvement. Ce loader CSS est très évocateur : les visiteurs du site savent immédiatement qu'ils doivent patienter le temps que la page ou l'élément charge.

See the Pen loader-CSS_points-mouvement by HubSpot France (@HubSpot-France) on CodePen.

L'engrenage

L'engrenage est une image efficace pour signifier que la requête est en train d'être traitée par la machine. Il faut utiliser des roues crantées, les imbriquer et les mettre en mouvement. Il est possible d'augmenter le nombre de roues et de les disposer de manière complexe, pour donner une impression de haute technicité.

See the Pen loader-CSS_engrenage by HubSpot France (@HubSpot-France) on CodePen.

La barre de progression

Afficher une barre de progression le temps du chargement d'un élément ou d'une page web est une pratique répandue. Pour certains internautes, toutefois, ce loader CSS peut être déceptif : ils s'attendent à ce que le traitement de leur requête soit finalisé une fois la progression achevée, alors que l'animation peut reprendre inlassablement du début.

See the Pen loader-CSS_barre-progression by HubSpot France (@HubSpot-France) on CodePen.

« Loading »

L'affichage du terme « Loading », ou sa version française « Chargement » est une indication très claire. Pour attirer l'attention, et rendre l'attente plus agréable, il est judicieux d'animer le mot. Il existe une multitude de manières d'animer ce type de loader CSS, en voici deux : une très sobre et l'autre plus sophistiquée.

See the Pen loader-CSS_loading-sobre by HubSpot France (@HubSpot-France) on CodePen.

See the Pen loader-CSS_loading-sophistique by HubSpot France (@HubSpot-France) on CodePen.

L'horloge qui tourne

Une animation de chargement est visible tout le temps qui passe pendant que les éléments de la page web chargent. Illustrer le temps qui passe à l'aide d'une horloge est évocateur. Ce loader CSS est un exemple classique.

See the Pen loader-CSS_horloge by HubSpot France (@HubSpot-France) on CodePen.

Le loader original

Il est possible d'animer tous types d'images avec CSS, de manière à proposer un loader original. Un lièvre ou une tortue qui avance, un personnage qui s'impatiente en tapant du pied ou encore un café qui coule lentement : des animations sur un ton humoristique font sourire, agrémentant ainsi l'attente.

See the Pen loader-CSS_original-cafe by HubSpot France (@HubSpot-France) on CodePen.

Les bonnes pratiques à adopter lors de l'intégration d'un loader en CSS

Voici 4 bonnes pratiques à adopter lors de l'intégration d'un loader en CSS :

1. Préférer un site rapide à un fabuleux loader CSS. Accélérer le chargement des pages est un enjeu qui prime sur l'esthétique des animations du site web, en termes d'UX et de SEO. Des techniques telles que le lazy loading contribuent à augmenter la vitesse. Le code CSS a également un impact, il faut l'optimiser.
2. Respecter la charte graphique et l'image de marque. Le loader CSS, comme tout élément du site web, doit refléter l'image de marque. Une marque B2B qui vend une expertise pointue dans un domaine très technique ne choisira pas une animation drôle, par exemple. Le loader CSS doit aussi respecter les codes visuels : les couleurs et la typographie, notamment.
3. Utiliser un loader CSS évocateur. L'animation doit parler d'elle-même. Il vaut mieux utiliser un loader populaire qu'un loader original, pour signifier correctement au visiteur du site que sa requête est en cours de traitement et qu'il doit patienter un peu.
4. Vérifier son code CSS. Le développeur web qui utilise un modèle trouvé en ligne, ou qui demande du code à une IA générative de type ChatGPT, doit vérifier son code CSS avant d'intégrer l'animation. En effet, ces techniques pour avancer le travail sont efficaces mais ne sont pas infaillibles.

Pour aller plus loin dans votre stratégie web, évaluez votre site internet avec l'outil Website Grader, ou découvrez le logiciel CMS de Hubspot.