Catégories
Astuces et Design

20 chargeurs de pages animées Pure CSS

Les chargeurs de pages sont souvent utilisés sur les sites Web pour donner à l'utilisateur quelque chose à regarder pendant le chargement du contenu en arrière-plan, ainsi que pour signaler à l'utilisateur que quelque chose se passe plutôt que de simplement regarder un écran vide pendant le chargement de la page. Les concepteurs créatifs ont mis au point une multitude de façons de rendre les chargeurs de pages divertissants, intéressants, attrayants et même amusants, afin de ne pas ennuyer l'utilisateur. Dans cette collection de chargeurs de pages animées en CSS pur, nous avons rassemblé une variété d'exemples intelligents et uniques pour votre inspiration. Vous pourrez peut-être en utiliser certains dans vos projets, ou peut-être vous inspireront-ils à créer votre propre spin unique sur le genre.

Votre boîte à outils Designer
Téléchargements illimités: plus de 500 000 modèles Web, jeux d'icônes, thèmes et éléments de conception


OuroboroCSS

Voici 9 variations sur un thème.

Voir le Pen CSS Loader de Geoffrey Crofte (@GeoffreyCrofte) sur CodePen.dark

Carrés animés

9 carrés qui s'animent aléatoirement en vue dans un carré plus grand.

Voir le Pen CSS Loader de Glen Cheney (@Vestride) sur CodePen.dark

Hexagones

Ce groupe d'hexagones qui forment un hexagone plus grand est apaisant et engageant.

Voir l'image de chargement du stylo par Doug Harper (@endodoug) sur CodePen.dark

Cercles qui se chevauchent

Utilisant une idée relativement courante parmi les chargeurs de pages, celui-ci le fait monter d'un cran par rapport aux points de base sur l'écran.

Voir le chargeur css Pen de Connor (@ CKH4) sur CodePen.dark

Chargeur CSS pur

Cette animation est ludique et légèrement captivante.

Voir le chargeur CSS Pen Pure # 2 de Jerome Renders (@JeromeRenders) sur CodePen.dark

Chargeur CSS Pushing Pixels

Simple mais fluide, il s'agit d'une autre variante de l'animation intemporelle des points de chargement.

Voir le chargeur CSS Pen poussant des pixels par Dave (@redlabor) sur CodePen.dark

Chargeur Infinity

Une autre animation intéressante et différente qui propose des options avec lesquelles vous pouvez jouer.

Voir le Pen CSS Infinity Loader de Michael Hobizal (@mikehobizal) sur CodePen.dark

Cercle unique

Bien qu'extrêmement simple, celui-ci réussit toujours à captiver momentanément l'utilisateur.

Voir le Pen Loader de Vadzim Tsupryk (@meecrobe) sur CodePen.dark

Chargeur Pure Css – Carré

Semblable à l'animation précédente de 9 carrés, mais plus méthodique dans la façon dont elle met chaque carré en vue et en ressort.

Voir le Pen Pure Css Loader – Square de Robert Borghesi (@dghez) sur CodePen.dark

Spinner de chargement CSS

Une animation très cool, colorée et propre dans celle-ci.

Voir le Spinner de chargement Pen CSS3 par Iván Villamil (@ivillamil) sur CodePen.dark

Chargeur d'orthographe

Il y a plusieurs animations qui se produisent dans ce chargeur de page.

Voir le Pen CSS Loader de Paolo Duzioni (@ Paolo-Duzioni) sur CodePen.dark

Chargeur CSS Gooey

Nous aimons toujours les effets d’animation gluants, comme ce que l’on voit ici.

Voir le chargeur css Pen gooey de Decatron (@megatroncoder) sur CodePen.dark

Chargeur CSS Helix

Une animation hélicoïdale 3D très bien réalisée peut être trouvée ici.

Voir le chargeur CSS Pen Helix par Jerry Low (@jerrylow) sur CodePen.dark

Chargeur Wifeo

Un autre chargeur de page de cercles animés colorés et amusants.

Voir le Pen PURE CSS LOADER de Wifeo (@wifeo) sur CodePen.dark

Chargeur CSS pur simple

Ressemblant presque à un dessin animé, celui-ci montre comment jouer avec presque toutes les formes et lignes pour créer un chargeur de page unique.

Voir le Pen Simple Pure CSS Loader par Izzy Skye (@chrysokitty) sur CodePen.dark

Chargeur de lignes

Que diriez-vous de prendre l'icône du menu hamburger et d'en faire une animation de chargeur de page colorée?

Voir l'interface utilisateur Pen Daily n ° 20 | Chargeur CSS par Håvard Brynjulfsen (@havardob) sur CodePen.dark

Chargeurs / Spinners CSS fantaisie

Voici une autre collection de 9 chargeurs de pages différents.

Voir les chargeurs / spinners CSS Pen Fancy de Jenning (@jenning) sur CodePen.dark

Chargeur de cercle animé

Ne regardez pas celui-ci trop longtemps ou vous pourriez vous retrouver hypnotisé!

Voir l'animation Pen CSS Loader par Sonja Strieder (@sonjastrieder) sur CodePen.dark

Chargeur de cercles

Un autre exemple de tout le plaisir que l'on peut avoir avec les cercles.

Voir l'animation Pen CSS Loader par Uwe Chardon (@uchardon) sur CodePen.dark

Chargeur géométrique

Ce dernier est une animation géométrique agréable, fluide et fascinante.

Voir le chargeur CSS Pen Pure # 4 de Jerome Renders (@JeromeRenders) sur CodePen.dark

N'oubliez pas de consulter nos autres collections ici sur 1stWebDesigner pour plus d'inspiration, d'apprentissage et tout simplement de plaisir!

Cet article peut contenir des liens affiliés. Voir notre divulgation sur les liens d'affiliation ici.

Laisser un commentaire

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