L’Internet moderne à haut débit nous a vraiment gâtés. De nos jours, si un site Web prend plus de 4 secondes à charger, nous avons tendance à ne même pas prendre la peine d’attendre ; nous fermons simplement la page et trouvons autre chose. C’est exactement la raison pour laquelle les concepteurs prennent le temps de proposer des préchargeurs créatifs, comme cette amusante petite balle rebondissante.
Qu’est-ce qu’un préchargeur ?
Essentiellement, les préchargeurs (également appelés chargeurs) sont ce que vous voyez à l’écran pendant que le reste du contenu de la page est encore en train de se charger. Les préchargeurs sont souvent des animations simples ou complexes qui servent à divertir les visiteurs pendant que les opérations du serveur terminent leur traitement. Malheureusement, ils sont aussi souvent négligés dans le processus de développement de la plupart des projets.
Pourquoi un préchargeur est-il important ?
Les préchargeurs sont des éléments d’interface importants qui permettent aux visiteurs de savoir que le site Web n’a pas planté, mais qu’il traite simplement des données. Ils sont généralement conçus comme des bandes mobiles ou des cercles clignotants qui représentent le temps nécessaire au chargement, qui, bien que fonctionnels, ne sont pas du tout divertissants. Des animations intéressantes peuvent maintenir l’intérêt de vos utilisateurs pendant qu’ils attendent le chargement de la page.
Les concepteurs travaillent vraiment dur pour rendre le temps d’attente moins pénible pour les visiteurs du site, mais cela peut être une tâche très difficile si la bonne inspiration (et les dernières connaissances) ne sont pas là.
Que doit être un excellent préchargeur ?
Ces dernières années, la plupart des projets ont été développés avec des chargeurs simplifiés comme meilleure pratique recommandée. Les animations complexes des chargeurs n’ont pas été populaires pendant un certain temps, car elles prenaient beaucoup de ressources pour fonctionner, ralentissant encore plus le processus de chargement de la page. Cependant, avec l’augmentation de la puissance de traitement, l’ère des chargeurs simples touche à sa fin.
Aujourd’hui, une animation créative et bien conçue offre la possibilité d’animer votre interface. Ce petit, mais important, détail contribue à l’individualité et à l’image de marque de tout produit.
Pour cette raison, nous avons compilé et sélectionné la liste suivante d’exemples de préchargeurs brillants, drôles et uniques (y compris certains des designs très propres à SteelKiwi) pour vous aider, vous et votre équipe de conception, à trouver de l’inspiration !
30 des meilleurs designs de préchargeurs qui existent
Vue du chargeur carré coulissant
Ce chargeur carré coulissant rend l’attente un peu moins frustrante car il permet à votre œil de se déplacer en même temps que les carrés. Une excellente solution pour les entreprises qui vendent de l’électronique ou des jeux en ligne afin de garder leurs visiteurs engagés sur le site web.
DotsLoaderView
Les boules noires rebondissantes qui apparaissent de nulle part et disparaissent servent d’élément divertissant et pourraient être utilisées pour les sites web qui veulent avoir l’air présentable mais avec une pincée de jeu.
Simple Loader
C’est un exemple parfait de préchargeur en forme de tambour qui ressemble à une roue de loterie tournante. Si un propriétaire d’entreprise souhaite établir un lien logique entre ce chargeur et l’application qui peut impliquer des opportunités, de la chance ou de l’excitation, alors cet écran de chargement devrait répondre à ses besoins.
Bird Loader
Ces formes géométriques simples rappellent un oiseau qui tourne la tête à gauche ou à droite comme s’il parlait à quelqu’un. Cette animation peut faire un bon préchargeur pour les sites présentant des entreprises de l’industrie de la télévision, de la radio ou des médias sociaux.
LittlePin Spinner
Les applications présentant des services de voyage ou de localisation pourraient rendre le chargement beaucoup plus attrayant grâce à ce petit géopin coloré qui se retourne d’avant en arrière.
No Halftime Loaders Petrick
Une animation excitante avec différentes sortes de balles en mouvement fait oublier aux visiteurs qu’il s’agit simplement d’un chargeur. Ce chargeur pourrait compléter tout site web présentant des événements sportifs, des activités ou des stocks de sport.
Monkey Swinging Loader Hello Dribbble
Vous aimez les animaux ? Voici un chargeur déguisé : un singe qui se balance. Étant amusant et divertissant, il peut séduire les utilisateurs pendant qu’ils attendent le chargement de la page. Les entreprises qui sont dans l’industrie du divertissement, comme les magazines, les films, le marketing, la publicité, ou celles qui veulent simplement se démarquer parmi la foule et dessiner un sourire sur le visage des visiteurs peuvent l’utiliser.
Cooper loader
Le préchargeur en cuivre en forme de boucle éternelle se déplace en douceur comme une vague hypnotique. Le chargeur avec son design soigné et minimaliste et son animation apaisante est applicable pour presque toutes les entreprises.
Loading…
Voici la goutte qui ne tombe jamais. Les couleurs blanche et bleue tamisée contrastent bien ensemble, et ce préchargeur ne rendra jamais le visiteur ennuyé ou frustré par le chargement. Les entreprises qui souhaiteraient séduire les jeunes générations pourraient utiliser cet écran de chargement.
Ping-Pong Loader
Le chargeur de ping-pong, avec son animation au toucher caoutchouteux mettant en scène des palettes et une balle, ne peut s’empêcher d’attirer le regard. Il est censé réchauffer les visiteurs avant qu’ils n’accèdent réellement au contenu d’un site Web. Ce chargeur est bon pour les sites de sport ou tout autre site qui propose tout ce qui va des activités sportives à l’inventaire.
SurveyPlanet app Loader
La planète turquoise avec une fusée blanche en orbite autour d’elle maintient l’attention des visiteurs sur l’écran de préchargement. Ce chargeur de planète peut être utilisé pour des apps de divertissement, ou toutes autres organisations qui font des recherches ou font connaître diverses découvertes au public.
Blurred Gear Loader
Un chargeur de roue dentée floue avec les trois roues dentées qui tournent incarne le mouvement et la complexité et pourrait convenir aux entreprises qui commercialisent des machines ou des pièces mécaniques.
CSS Stairs Loader
Le chargeur d’escaliers descendants et ascendants avec une boule blanche qui saute au sommet a un design minimaliste et pourtant il est très simple. Il pourrait avoir du sens pour les entreprises qui veulent se présenter comme sérieuses et dignes de confiance.
Loading Pen
Avec une légère touche de simplicité, les cercles colorés en forme de chenille qui se déplacent vers la gauche ou la droite et viennent par un de chaque côté rendent le chargement moins ennuyeux pour les visiteurs. Ce chargeur convient à presque tous les types d’entreprises grâce à son animation universelle, et il devrait permettre aux visiteurs de s’amuser en attendant d’atterrir sur la page d’accueil.
CSS Loader
Un chargeur simple qui attire l’attention, comme ce cube roulant qui s’agrandit en avançant et revient à sa forme initiale en revenant en arrière, est une solution réservée aux entreprises qui veulent paraître intelligentes et sophistiquées aux yeux du visiteur.
Vivid CSS3 Spinner
Le vivid spinner loader avec l’arc-en-ciel rotatif qui s’enroule dans une sorte de forme géométrique en forme de fleur peut égayer les visiteurs et les aider à se préparer à quelque chose d’amusant et d’excitant. Un tel chargeur pourrait être utilisé pour les entreprises qui commercialisent leurs produits ou services auprès des enfants. Il devrait bien fonctionner pour les sites d’éducation des enfants.
Écran de chargement prismatique
L’écran de chargement prismatique devrait rappeler l’arrière-plan de LinkedIn pour les photos. Le chargeur ressemble à distance à des constellations qui se déplacent dans l’espace avec l’élément principal au milieu qui pourrait potentiellement présenter un logo d’entreprise. Le loader pourrait être utilisé pour les entreprises qui travaillent avec des clients internationaux, par exemple dans le secteur du B2B.
Loader
Vous aimez la variété ? Voici le chargeur qui garde un visiteur diverti, en lui laissant voir un compte à rebours accompagné d’une animation changeante de différentes images. Gardez à l’esprit, que ce chargeur peut avoir n’importe quelles images en rotation afin qu’il puisse répondre aux besoins de n’importe quelle entreprise.
Loader de redirection
Voici une silhouette d’homme avec un jetpack sur le dos volant aussi vite qu’il le peut. Un tel chargeur qui redirige un utilisateur vers la page suivante peut être utilisé par presque toutes les entreprises, en particulier celles qui souhaitent mettre en avant l’élément de vitesse de leur service.
Codepen Loading Dots
Ayant un design minimaliste et succinct, ce préchargeur de points pourrait être utilisé par des personnes artistiques ou des designers pour leurs portfolios en ligne par exemple.
Preloader Animation
Ce préchargeur ne devrait-il pas rappeler le jeu du serpent ? Cette animation d’icône d’énergie avec une prise peut avoir du sens pour les fournisseurs d’Internet ou toute autre agence qui aide les entreprises et les clients à collaborer.
Faire des crêpes
Des crêpes à même le fourneau ! Le chargeur avec une crêpe qui se retourne sur la poêle à frire devrait mettre l’eau à la bouche d’un visiteur. Il peut être un bon début pour les sites web dédiés à la cuisine ou à la pâtisserie.
Simple Loader
Si un propriétaire d’entreprise n’est pas pointilleux sur son préchargeur et souhaite rester simple, en voici un direct avec un rectangle qui se divise.
Loader Animation
Voici une collection de chargeurs animés personnalisés alimentés par SVG présentant différentes formes et des formes géométriques de base. Les propriétaires d’entreprises qui veulent maintenir le sérieux peuvent exploiter la netteté de ces chargeurs dans divers objectifs de conception.
Chargement d’animation de main
Cette animation de main semble ne jamais cesser de tapoter ses doigts comme si elle attendait toujours quelque chose. Elle traduit en quelque sorte le sentiment que les gens peuvent éprouver lorsqu’ils attendent et pourrait être utilisée par les entreprises qui s’efforcent de conserver un grand sens de l’humour sur elles-mêmes.
Préchargeur d’arbre
Le préchargeur d’arbre alimenté par SVG et CSS est une animation soignée à faire apparaître sur des applications familiales ou médicales. L’arbre étend progressivement ses branches qui semblent respirer, rendant l’animation agréable à regarder.
Préchargeur de voyage
Voici un préchargeur applicable aux entreprises de location de voyages et de transports. L’écran de chargement change le type de véhicule accompagné du texte pour améliorer l’impression générale.
Car Drift Loader
Ce chargeur de dérive de voiture alimenté par SVG est une autre solution non conventionnelle pour les sites Web qui commercialisent des véhicules. Cependant, si on le prend au sens figuré, le préchargeur peut être utilisé pour des sites Web ou des applications liés à divers événements sociaux qui apportent de l’excitation aux gens et font une impression durable.
Spinning Head
Et une cerise sur le gâteau ! Voici un préchargeur avec une pincée d’humour – peu importe à quel point le personnage en gomme à bulles court autour de sa tête, il est trop lourd et trop gros pour être déplacé, et il semble s’en amuser.
Les plus grands exemples d’animations de préchargement de page
Voici 5 sites web avec des préchargeurs éloquents pour vous faire plaisir !
1. W. Brett Wilson
Un autre écran de chargement créatif se trouve sur le site de W. Brett Wilson. La silhouette d’un homme courant dans une roue de hamster et le texte apparaissant comme un diaporama maintiennent le visiteur diverti et engagé avec le site Web, tout en complétant son design.
2. Сreative Сruise
Le site Web de Creative Cruise a été construit pour inviter les gens à célébrer l’ambiance créative d’Amsterdam. Pour souligner l’atmosphère avant même que le visiteur atterrisse sur la page d’accueil, un homme à l’allure hilarante qui danse le breakdance apparaît sur l’écran de chargement. Le personnage utilisé dans le préchargeur est parfaitement logique puisque la page d’accueil est pleine de personnages semblables qui dansent et font la fête.
3. Openencontinents
Voici un site Web construit pour l’exploration cinématographique dans le cadre d’une narration globale. L’animation d’Open Continents est un préchargeur bien déguisé mettant en scène des étoiles dansantes dans un cercle de manège. L’animation est séduisante avec son élément interactif où l’utilisateur peut diriger son curseur sur le cercle et voir comment les étoiles se propagent. Ce préchargeur complète la Terre qui apparaît sur la page d’accueil. L’idée est d’incarner le mouvement et le mystère, en motivant les visiteurs à explorer le site, en les gardant intéressés pendant ce temps.
4. Kokopako
Des sites Web comme Kokopako (créé sous la forme d’un portfolio) peuvent faire bon usage des préchargeurs, en ajoutant une touche personnelle et une signification au contenu d’un site. L’année 1987 est un préchargeur de compte à rebours qui approfondit la narration du site, tout en étant bien intégré à la page d’accueil.
5. McWhopper.com
Le site Web de McWhopper a été créé pour commercialiser une proposition spéciale de McDonald’s et Burger King. Le préchargeur du site web est très attrayant pour les premiers visiteurs avec son burger animé qui saute comme s’il était sur un trampoline, ce qui donne l’occasion de voir tous les ingrédients et rend l’attente plus agréable. En outre, le préchargeur fait usage de texte et s’intègre bien au design général du site.
Plus de ressources sur les chargeurs
Nous espérons que cette liste vous inspirera pour développer un excellent design de préchargeur pour votre projet !
Pour encore plus d’exemples de chargeurs créatifs, vous pouvez également explorer cette vitrine des meilleurs préchargeurs de sites Web réalisés avec des Gifs animés, des CSS3, des Canvas ou d’autres techniques basées sur Javascript, tirer des enseignements de ce billet sur la création de chargeurs animés en n’utilisant rien d’autre que CSS, et parcourir ce billet sur la création d’animations personnalisées pour diminuer vos taux de rebond.
Vous n’avez pas le temps de construire le vôtre ? Il y a beaucoup de préchargeurs qui peuvent être utilisés gratuitement (ou pour un petit prix). Consultez preloaders.net ou parcourez cette liste de préchargeurs et de spinners gratuits pour les webdesigners et les développeurs.
Si vous avez d’autres questions sur la conception de préchargeurs, ou si vous avez besoin d’un design vraiment unique et original pour un préchargeur de votre cru, contactez notre équipe et nous vous proposerons le chargeur parfait qui transformera votre projet en quelque chose de vraiment inoubliable !
Appliquez les préchargeurs dans vos conceptions de pages d’accueil et de pages de destination.