Chargeurs d'élément unique: les barres

Cet article explore la création d'animations de chargement à l'aide de barres, en suivant l'approche à élément unique et les techniques CSS flexibles utilisées dans les articles précédents se concentrant sur les filateurs et les points. Nous générerons de nombreuses variations avec un minimum de modifications de code, en tirant parti de la puissance de CSS.

Aperçu de la série

• Chargeurs d'élément unique: le spinner
• Chargeurs d'élément unique: les points
• Chargeurs à élément unique: les barres - Article actuel
• Chargeurs d'élément unique: aller 3D

Plongeons-nous dans 20 exemples de chargeur de bar. Bien que cela puisse sembler intimidant, tous les exemples partagent la même structure de code, avec des variations réalisées grâce à des ajustements de valeur simples. L'accent n'est pas mis sur la création d'un chargeur spécifique, mais sur les techniques de maîtrise pour générer d'innombrables variations à partir d'un seul code de base.

Construire les barres

Nous commençons par définir les dimensions en utilisant width (ou height ) et aspect-ratio pour maintenir les proportions:

 .Bars {
  Largeur: 45px;
  Ratio d'aspect: 1;
}

Nous simulons trois barres à l'aide d'un fond de gradient linéaire - une méthode similaire aux chargeurs de points de la partie 2.

 .Bars {
  Largeur: 45px;
  Ratio d'aspect: 1;
  --c: sans répétition linéaire-gradient (# 000 0 0); / * Définir la couleur * /
  arrière-plan: 
    var (- c) 0% 50%,
    var (- c) 50% 50%,
    var (- c) 100% 50%;
  taille arrière: 20% 100%; / * 20% * (3 bars 2 espaces) = 100% * /
}

Cela crée une structure à trois barres. Cet article utilise fortement la manipulation des antécédents, la référence aux articles précédents ou à la réponse à débordement de pile liée fournira des explications plus détaillées si nécessaire.

Animer les bars

L'animation est réalisée en modifiant la taille ou la position de l'élément. Animons la taille à l'aide d'images clés:

 @KeyFrames Load {
  0% {taille arrière: 20% 100%, 20% 100%, 20% 100%; }
  33% {taille arrière: 20% 10%, 20% 100%, 20% 100%; }
  50% {taille arrière: 20% 100%, 20% 10%, 20% 100%; }
  66% {taille arrière: 20% 100%, 20% 100%, 20% 10%; }
  100% {taille arrière: 20% 100%, 20% 100%, 20% 100%; }
}

Les images clés ajustent la background-size de chaque segment de gradient à travers la durée de l'animation.

Alternativement, la réparation de la taille à 20% 50% et l'animation des positions donne des résultats différents:

 .loader {/ * ... styles précédents ... * /
  Animation: Chargez 1s Infinite Linear;
}
@KeyFrames Load {
  / * ... Position des images clés d'animation ... * /
}

En manipulant la taille et la position, d'innombrables variations de chargement sont possibles. Des gradients plus complexes élargissent encore les options de conception. La plupart des exemples de la démo utilisent le même balisage et les mêmes styles, ne différant que par les combinaisons d'animation.

Amélioration des techniques avancées

La technique de masquage de l'article des points peut être appliquée ici. Remplacement des propriétés background-* par mask-* et l'ajout d'un gradient crée des chargeurs visuellement attrayants. La technique de base reste cohérente entre les points et les barres: les gradients définissent les formes, l'animation modifie la taille / la position et les masques ajoutent de la couleur.

Arrondir les barres

Une approche différente utilise le ::before et ::after des pseudo-éléments pour créer trois barres arrondies:

 .Loader {/ * ... Styles utilisant des variables CSS pour la taille et la position ... * /}

Un effet de gradient continu est simulé en positionnant soigneusement les gradients individuels dans chaque élément. L'animation de la hauteur avec des retards produit des animations variées.

Conclusion

Cet article démontre la polyvalence de la création d'animations de chargement complexes avec un code minimal. En combinant des éléments uniques, des gradients, des pseudo-éléments et de l'animation, une vaste gamme de conceptions d'animation de chargement est réalisable. Les exemples et techniques fournis encouragent l'expérimentation et la création de chargeurs uniques et visuellement attrayants.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!