Sélectionner une page


Tout le monde est toujours pressé et un site Web qui prend plus de 2 ou 3 secondes à se charger est perçu comme « beaucoup trop lent ». Heureusement, il existe un moyen de contourner temporairement cette panique et de garder les utilisateurs sur un site Web suffisamment longtemps pour que les choses se chargent. Je parle de l’animation de chargement parfaitement hypnotique.

Dans cet article, nous allons voir ce qu’est exactement une animation de chargement, à quoi elle sert et comment vous pouvez en ajouter une à n’importe quel site WordPress, y compris vos sites Divi.

Qu’est-ce qu’une animation de chargement?

Une animation de chargement, également connue sous le nom de préchargeur, est une animation accrocheuse qui apparaît sur un site Web suffisamment longtemps pour que tous les éléments se chargent. Certaines animations de chargement sont courtes et n’ont pas besoin d’attirer longtemps l’attention de l’utilisateur. Dans certains cas, lorsque le site est très volumineux, l’animation de chargement doit être vraiment attrayante pour que l’utilisateur puisse s’y tenir.

Si vous êtes là depuis assez longtemps, vous saurez que le chargement d’animation existe depuis les années 90. Au début de l’ère Internet, nous avions déjà chargé des animations. Bien sûr, ils pourraient durer beaucoup plus longtemps qu’aujourd’hui. En outre, nous avons appris à les rendre beaucoup plus agréables pour l’utilisateur sans les ennuyer et s’éloigner.

Familiarisez-vous avec les animations de chargement

Le style le plus courant pour charger une animation est le gyroscope. À ne pas confondre avec le «cercle arc-en-ciel de la mort» des ordinateurs Apple. L’animation de chargement du cercle en rotation a un mouvement de progression échelonné. Les premiers sous-chargeurs rotatifs sont venus dans de nombreuses versions différentes, des fleurs aux cercles en passant par les flocons de neige et même le ying yang. De nos jours, les animations de chargement en rotation sont plus dynamiques et plus belles à regarder.

La rotation des animations de charge ne fonctionne que si le temps d’attente est court. Plus de 5 secondes, c’est déjà trop. Les développeurs doivent ensuite utiliser davantage de préchargeurs créatifs. Une animation de chargement amusante et divertissante gardera un utilisateur sur le site Web, quel que soit le temps que cela prendra.

Conseils pour mieux charger les animations

Il y a quelques éléments que vous pouvez ajouter à votre animation de chargement pour la rendre plus intéressante qu’une simple image animée. Voici quelques conseils pour le rendre encore meilleur et plus efficace.

  • Ajouter une barre de pourcentage
  • Montre combien de temps l’utilisateur doit attendre
  • Expliquez ce qui se passe sous le capot (accessoires pour utiliser l’humour)
  • Utilisez une animation amusante qui ne répète pas nécessairement exactement la même action

Les avantages d’une animation de chargement de marque

Si vous avez la possibilité de créer votre propre animation de chargement ou d’utiliser un plugin avec des options de personnalisation, assurez-vous que le préchargeur est de marque. Cela peut être aussi simple que d’utiliser les couleurs du site Web de marque pour avoir une illustration de l’entreprise. L’idée derrière la personnalisation d’une animation de chargement est de donner l’impression qu’elle appartient à ce site et n’est pas seulement un module complémentaire. Ce tour d’horizon sur le site Web d’Awwwards peut inspirer vos propres créations.

Voici comment ajouter une animation de chargement à votre site WordPress

L’ajout d’une animation de chargement est plus facile que vous ne le pensez. Il existe un certain nombre d’options pour en ajouter un à un site WordPress. Des plugins faciles à utiliser à l’ajout de code personnalisé sur le site. Comme il y a tellement d’options différentes, je les énumérerai ici afin que vous puissiez magasiner et découvrir celle qui vous convient le mieux.

Utilisez un plugin pour ajouter une animation de chargement

Un plugin est le moyen le plus simple et le plus simple d’ajouter une animation de chargement. Celles-ci sont particulièrement utiles lorsque vous ne vous sentez pas à l’aise avec le code ou que vous manquez de temps. Voici une liste des plugins les plus polyvalents pour le chargement d’animation. Certains d’entre eux sont gratuits et certains sont premium. Dans certains cas, le même plugin a une version gratuite plus simple et une version Pro plus robuste.

Chargeur de grenier

Loftloader a une version gratuite et une version pro. Dans la version gratuite, vous pouvez essayer certains des proloaders, puis les personnaliser en fonction du site Web et de la marque. La version Pro a plus d’options et des contrôles plus détaillés.

Préchargeur plat

Préchargeur plat est un simple plugin gratuit avec un nombre limité d’animations de chargement colorées. Ce plugin est parfait lorsque vous avez besoin d’une solution rapide pour un préchargeur et que vous n’avez pas besoin d’ajuster les couleurs ou l’image.

Meilleur préchargeur

Meilleur préchargeur est un plugin de chargement d’animation gratuit avec une option adaptée à tous les styles de sites Web. Je propose une animation avec quelques contrôles de réglage.

Chariot latéral

Chariot latéral est un plugin de chargement d’animation premium avec de nombreuses options de personnalisation et de personnalisation. C’est l’un des plugins de préchargement les plus populaires.

WP Smart Preloader

WP Smart Preloader est un plugin open source gratuit avec des options de personnalisation complètes. Les animations ne sont pas très complexes, mais elles s’adaptent à tous les styles du site Web. Vous pouvez facilement ajuster les couleurs et les paramètres.

Ajouter une animation de chargement sans plugin

Si vous souhaitez éviter d’utiliser un plugin, de nombreuses animations de chargement gratuites et prêtes à l’emploi sont disponibles. Ainsi que des didacticiels avancés contenant les extraits de code que vous devez ajouter.

PixelBuddha avec multimédia:

Les gars du multimédia a publié un tutoriel simple avec deux ensembles gratuits d’animations de chargement PixelBuddha et le code dont vous avez besoin pour les configurer sur votre site.

CodePen:

Cet article du milieu Depuis UX Planet, l’auteur résume de nombreuses animations de chargement dans différents styles. Il y en a des simples et des plus complexes. La plupart d’entre eux sont intégrés à CodePen et vous pouvez obtenir l’extrait de code HTML et CSS à partir du widget lui-même. Vous devez les mettre dans un ensemble complet de code pour qu’une animation de chargement soit mise en place.

SpinKit:

Tobias Ashlink a un SpinKit avec une belle collection d’animations de chargement utilisant le code disponible sur GitHub. Ceux-ci doivent également être ajoutés à un jeu de codes complet pour une installation de pré-loaer.

Loading.io:

Loading.io est une collection d’animations de chargement avec de nombreuses options différentes. Il existe des préchargeurs CSS, des préchargeurs GIF, des boutons, etc. Recherchez sur le site Web toutes les options et instructions pour l’ajouter à votre site Web.

Pixelvars:

Les garçons sont des pixelvars a écrit un didacticiel pratique avec tout le code dont vous avez besoin pour configurer votre propre animation de chargement. Vous pouvez même utiliser votre code en conjonction avec les animations CodePen ou GitHub ci-dessus. Cette option semble un peu plus avancée pour certaines personnes. Impliquez-vous si vous êtes un développeur avec de bonnes compétences en programmation.

Avec autant d’options, quelles options choisirez-vous?

Ajouter une animation de chargement à un site Web WordPress est facile. Avec autant d’options différentes, ce n’est qu’une question de choix.

Dans cet article, nous vous avons montré de nombreuses façons d’ajouter une animation de chargement à votre site. Quelle est votre méthode préférée? Personnalisé et ajouté à un sujet enfant avec du code? Un plugin personnalisable? Une option simple et sans fioritures? Faites-nous savoir dans les commentaires afin que nous puissions examiner vos propres animations de chargement.

Image sélectionnée via muchomoros / shutterstock.com





Source link

Recent Posts