Share
Les préchargeurs sont courants dans la conception Web moderne. En tant qu'utilisateurs, nous nous attendons à ce que le Web soit rapide et fluide - nous n'aimons pas attendre. Les préchargeurs offrent un retour visuel lors du chargement du contenu, ce qui permet de gérer les attentes et de réduire les risques d'abandon de votre site Web par un utilisateur..
Avant de plonger dans la construction de notre collection de préchargeurs CSS3, je vais d'abord aborder quelques-uns des attributs de CSS3 qui sont essentiels à la création de ce type de préchargeurs..
Accentsconagua
:avant :aprèsLes pseudo-éléments sont vraiment utile pour aider à créer des préchargeurs CSS3. Les pseudo-éléments créent essentiellement un faux élément avant ou après l'élément HTML en question.
“Le pseudo est dérivé du mot grec pseudēs qui signifie faux. "
Ceci est similaire à la création d'un élément supplémentaire qui n'existe pas vraiment, mais les pseudo-éléments peuvent être stylés à l'aide de CSS. Ces pseudo-éléments ne sont pas nécessaires à la création de préchargeurs CSS3, mais ils s'avèrent utiles et nous permettent d'utiliser un balisage minimal..
Les pseudo-éléments peuvent être stylés exactement de la même manière que tout autre élément HTML, la seule différence étant que vous devez spécifier un élément. contenu propriété. Sans cela, le pseudo-élément ne sera pas rendu. La propriété content peut contenir n’importe quel texte pouvant être utile si votre pré-chargeur doit contenir des mots tels que «Chargement…». Toutefois, si vous n’avez pas besoin de contenu textuel, vous pouvez laisser la propriété vide..
Les pseudo-éléments CSS sont utiles mais non essentiel pour la création de préchargeurs CSS3, mais la propriété animation est. Sans cela, le pré-chargement ne pourrait pas s'animer et ne serait qu'un visuel statique - ce qui n'est pas très utile pour indiquer que le contenu est en cours de chargement..
“Le composant principal des animations CSS est @keyframes, la règle CSS où l'animation est créée. Pensez à @keyframes en tant qu'étapes du calendrier. Dans les images clés @, vous pouvez définir ces étapes, chacune ayant une déclaration de style différente. ”- Une introduction à l'animation CSS
Remarque: avant de passer aux démonstrations, il convient de noter que les préfixes de fournisseur ne sont pas inclus dans les extraits de code ci-dessous. Si vous avez besoin des préfixes de fournisseur, veuillez consulter les exemples de code.
L’idée de ce pré-chargeur est de créer une animation semblable à une onde audio..
Ceci est réalisé en créant cinq plages, chacune représentant une barre audio.
L'effet est obtenu en animant la hauteur de chaque plage de 5 à 30 pixels. La portée diminue également de 15px sur l'axe des ordonnées pour donner l’effet qu’elle se développe à partir du centre..
# preloader_1 position: relative; # preloader_1 span display: block; en bas: 0px; largeur: 9px; hauteur: 5px; arrière-plan: # 9b59b6; position: absolue; animation: preloader_1 1.5s infinie facilité d’entrée / sortie; # preloader_1 span: nth-child (2) left: 11px; animation-delay: .2s; # preloader_1 span: n-enfant (3) left: 22px; animation-delay: .4s; # preloader_1 span: nième enfant (4) left: 33px; délai d'animation: .6s; # preloader_1 span: nième enfant (5) left: 44px; animation-delay: .8s; @keyframes preloader_1 0% hauteur: 5px; transformation: translateY (0px); arrière-plan: # 9b59b6; 25% hauteur: 30px; transformation: translateY (15px); arrière-plan: # 3498db; 50% hauteur: 5px; transformation: translateY (0px); arrière-plan: # 9b59b6; 100% hauteur: 5px; transformation: translateY (0px); arrière-plan: # 9b59b6;
Par défaut, l'animation de chaque étape se déroule au même moment. le Vague mexicaine l'effet est créé en ajoutant délai d'animation à chaque travée avec un décalage de 2 millisecondes. Chaque période est ciblée à l'aide du nième enfant () sélecteur.
Ce pré-chargeur utilise quatre carrés qui se déplacent, tournent, changent de couleur et deviennent des cercles.
Il est créé en utilisant quatre portées. Chacun d'eux est un cercle / carré et sa propre animation lui est appliquée.
Tous les quatre se transforment d’un carré en un cercle en ajustant le rayon de la bordure de 0px (carré) à 20px (cercle).
# preloader_2 position: relative; à gauche: 50%; largeur: 40px; hauteur: 40px; # preloader_2 span display: block; en bas: 0px; largeur: 20px; hauteur: 20px; arrière-plan: # 9b59b6; position: absolue; # preloader_2 span: nth-child (1) animation: preloader_2_1 1,5 s infinie de facilité d’entrée / sortie; # preloader_2 span: nth-child (2) left: 20px; animation: preloader_2_2 1.5s infinie facilité d’entrée / sortie; # preloader_2 span: nth-child (3) top: 0px; animation: preloader_2_3 1.5s infinies facilité d'accès; # preloader_2 span: nth-child (4) top: 0px; à gauche: 20px; animation: preloader_2_4 1.5s infinie facilité d’entrée / sortie; @ -keyframes preloader_2_1 0% -transform: translateX (0px) translateY (0px) pivoter (0deg); border-radius: 0px; 50% -transform: translateX (-20px) translateY (-10px) rotation (-180deg); border-radius: 20px; background: # 3498db; 80% -transform: translateX (0px) translateY (0px) rotate (-360deg); border-radius: 0px; 100% -transform: translateX (0px) translateY (0px) faire tourner (-360deg); border-radius: 0px; @ -keyframes preloader_2_2 0% -transform: translateX (0px) translateY (0px) pivoter (0deg); border-radius: 0px; 50% -transform: translateX (20px) translateY (-10px) rotation (180 degrés); border-radius: 20px; fond: # f1c40f; 80% -transform: translateX (0px) translateY (0px) rotation (360deg); border-radius: 0px; 100% -transform: translateX (0px) translateY (0px) faire pivoter (360deg); border-radius: 0px; @ -keyframes preloader_2_3 0% -transform: translateX (0px) translateY (0px) rotation (0deg); rayon: 0px; 50% -transform: translateX (-20px) translateY (10px) rotation (-180deg); border-radius: 20px; background: # 2ecc71; 80% -transform: translateX (0px) translateY (0px) pivoter (-360deg); border-radius: 0px; 100% -transform: translateX (0px) translateY (0px) faire pivoter (-360deg); border-radius: 0px; @ -keyframes preloader_2_4 0% -transform: translateX (0px) translateY (0px) rotation (0deg); border-radius: 0px; 50% -transform: translateX (20px) translateY (10px) pivoter (180deg); border-radius: 20px; background: # e74c3c; 80% -transform: translateX (0px) translateY (0px) rotate (360deg); border-radius: 0px; 100% -transform: traduireX (0px) translateY (0px) faire pivoter (360deg); border-radius: 0px;
Chacun tourne et se déplace également le long des axes X et Y dans le sens opposé à sa position actuelle. La couleur de chaque travée est également animée d'un violet uniforme à sa propre couleur indépendante. Cela donne l’impression que les formes de plusieurs cercles se confondent en un seul carré.
Le pré-chargeur de formes de croisement est une div unique qui utilise le :avant et :après pseudo-éléments dont nous avons parlé précédemment.
# preloader_3 position: relative; # preloader_3: before width: 20px; hauteur: 20px; border-radius: 20px; fond: bleu; content: "; position: absolute; background: # 9b59b6; animation: preloader_3_before 1,5s; infinie facilité d'entrée / de sortie; # preloader_3: après width: 20px; height: 20px; border-radius: 20px; arrière-plan: bleu; contenu : "; position: absolue; arrière-plan: # 2ecc71; à gauche: 22px; animation: preloader_3_after 1.5s infinie facilité d’entrée / sortie; @keyframes preloader_3_before 0% transformer: traduireX (0px) tourner (0deg) 50% transformer: traduireX (50px) échelle (1.2) faire pivoter (260deg); background: # 2ecc71; border-radius: 0px; 100% transformer: traduireX (0px) faire pivoter (0deg) @keyframes preloader_3_after 0% transformer: translateX (0px) 50% transformer: translateX (-50px) ) échelle (1.2) faire pivoter (-260deg); fond: # 9b59b6; border-radius: 0px; 100% transformer: traduireX (0px)
Une animation est placée sur # preloader_3: before et un autre sur # preloader_3: après. Chaque animation change de couleur à l’heure opposée. De la même manière que le préchargement précédent, chaque pseudo-élément passe d’un cercle à un carré en animant le rayon de la frontière propriété.
Le serpent est constitué d'une collection de travées, chacune étant coiffée pour former un cercle.
Voici le balisage, mais vous pouvez toujours essayer de créer le pré-chargeur de serpent avec trois cercles et au lieu d’avoir plusieurs étendues, utilisez simplement # preloader_4 div avec :avant et :après.
L'animation est créée en transformant la position Y de chaque animation de -10 pixels et en changeant la couleur du bleu au jaune. Pour créer l'effet d'ombre sous-jacent, une ombre portée est ajoutée à chaque étendue, ce qui modifie sa taille d'ombre verticale de 0px à 20px..
# preloader_4 position: relative; # preloader_4 span position: absolute; largeur: 20px; hauteur: 20px; arrière-plan: # 3498db; opacité: 0,5; border-radius: 20px; -animation: preloader_4 1s facilité infinie; # preloader_4 span: nth-child (2) left: 20px; animation-delay: .2s; # preloader_4 span: nth-child (3) left: 40px; animation-delay: .4s; # preloader_4 span: nième enfant (4) left: 60px; délai d'animation: .6s; # preloader_4 span: nth-child (5) left: 80px; animation-delay: .8s; @keyframes preloader_4 0% opacity: 0.3; transformer: translateY (0px); box-shadow: 0px 0px 3px rgba (0, 0, 0, 0,1); 50% opacité: 1; transformer: translateY (-10px); arrière-plan: # f1c40f; box-shadow: 0px 20px 3px rgba (0, 0, 0, 0,05); 100% opacité: 0,3; transformer: translateY (0px); box-shadow: 0px 0px 3px rgba (0, 0, 0, 0.1);
De la même manière que le préchargeur 1, en ajoutant délai d'animation à chaque intervalle et en compensant le retard de chaque intervalle de 2 millisecondes, il crée l'effet de vague.
C'est… un truc effrayant.
Ici, nous utilisons simplement une seule div pour le cercle central et :après sur cette div pour créer les lignes extérieures.
Ajouter une bordure en haut et en bas et lui donner un rayon de la frontière de 50px crée les deux lignes extérieures. Une animation est ajoutée à la div principale, juste pour changer la couleur de la div principale et créer l'effet de rotation en ajoutant transformer: rotate () . le :après l'animation d'élément est ajoutée pour changer la couleur de la bordure extérieure.
# preloader5 position: relative; largeur: 30px; hauteur: 30px; arrière-plan: # 3498db; border-radius: 50px; animation: preloader_5 1.5s linéaire infini; # preloader5: after position: absolute; largeur: 50px; hauteur: 50px; bord supérieur: 10px solide # 9b59b6; bordure inférieure: 10px solide # 9b59b6; border-left: 10px solid transparent; border-right: 10px solid transparent; border-radius: 50px; content: "; en haut: -20px; à gauche: -20px; animation: preloader_5_après 1.5s infini linéaire; @keyframes preloader_5 0% transformation: rotation (0deg); 50% transformation: rotation (180deg); fond: # 2ecc71; 100% transformer: faire pivoter (360 °); @keyframes preloader_5_after 0% border-top: 10px solide # 9b59b6; border-bottom: 10px solide # 9b59b6; 50% border-top: 10px solide # 3498db; bordure-bas: 10px solide # 3498db; 100% bordure-haut: 10px solide # 9b59b6; bordure-bas: 10px solide # 9b59b6;
Nous sommes allés un peu Microsoft sur celui-ci…
Ce pré-chargeur est créé en utilisant un div et quatre plages pour créer chaque carré.
Ces carrés sont ensuite positionnés dans un ordre semblable à celui d'une grille. Une animation est ajoutée à la division principale pour faire pivoter tout le pré-chargeur. Une autre animation est ajoutée aux étendues, qui passe de 100% à 50%. Nous ajoutons ensuite délai d'animation à chaque portée pour créer l'effet de pulsation.
# preloader6 position: relative; largeur: 42px; hauteur: 42px; animation: preloader_6 5s linéaire infini; # preloader6 span width: 20px; hauteur: 20px; position: absolue; fond: rouge; bloc de visualisation; animation: preloader_6_span 1s linéaire infini; # preloader6 span: nième enfant (1) background: # 2ecc71; # preloader6 span: nième enfant (2) left: 22px; arrière-plan: # 9b59b6; animation-delay: .2s; # preloader6 span: nième enfant (3) top: 22px; arrière-plan: # 3498db; animation-delay: .4s; # preloader6 span: nième enfant (4) top: 22px; à gauche: 22px; arrière-plan: # f1c40f; délai d'animation: .6s; @keyframes preloader_6_span 0% transform: scale (1); 50% transformer: scale (0,5); 100% transformer: scale (1);
Le grand avantage de l'utilisation des préchargeurs CSS3 par rapport aux préchargeurs d'image est qu'ils sont évolutifs et prêts pour la rétine. Cela signifie que, quel que soit le périphérique sur lequel ils sont affichés, ils seront toujours clairs, propres et évolutifs (même en gardant à l'esprit que tous les navigateurs traditionnels ne prennent pas en charge l'animation CSS3).
En comprenant quelques propriétés et techniques CSS3 importantes, vous devriez maintenant être en mesure de créer vos propres préchargeurs CSS3. Ils sont amusants à créer et avec un peu d’expérimentation, vous pouvez créer des animations vraiment sympas pour empêcher les utilisateurs de quitter votre site Web..
Si vous avez récemment créé des préchargeurs sympas, j'aimerais les voir! N'hésitez pas à laisser vos commentaires ci-dessous.
