Chargeurs à élément unique : les points

Nous examinons les chargeurs de cette série. De plus, nous décomposons certains modèles de chargeur courants et comment les recréer avec rien de plus qu'un seul div. Jusqu'à présent, nous avons séparé le chargeur tournant classique. Maintenant, regardons un autre que vous connaissez probablement bien : les points.

Les chargeurs de points sont partout. Ils sont soignés car ils sont généralement constitués de trois points qui ressemblent en quelque sorte à des points de suspension de texte (…) qui dansent.

Notre objectif ici est de créer la même chose à partir d'un seul élément div. En d’autres termes, il n’y a pas de div par point ni d’animations individuelles pour chaque point.

Cet exemple de chargeur ci-dessus est réalisé avec un seul élément div, quelques déclarations CSS et aucun pseudo-élément. Je combine deux techniques en utilisant CSS background ainsi que mask. Et lorsque nous aurons terminé, nous verrons comment l'animation d'un dégradé d'arrière-plan contribue à créer l'illusion de chaque point changeant de couleur à mesure qu'il monte et descend successivement.

L'animation d'arrière-plan

Commençons par l'animation d'arrière-plan :

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

J'espère que cela semble assez simple. Ce que nous avons, c'est un 180px-Wide .loader élément qui montre deux dégradés coniques arborant des arrêts de couleurs dures entre deux couleurs chacun - le premier dégradé est rouge et bleu le long de la moitié supérieure du .loader, et le deuxième dégradé est vert et violet le long de la moitié inférieure.

La façon dont l'arrière-plan du chargeur est dimensionné (200% large), nous ne voyons qu’une de ces couleurs dans chaque moitié à la fois. Ensuite, nous avons cette petite animation qui repousse la position de ces dégradés d'arrière-plan vers la gauche, la droite et l'arrière pour toujours.

Lorsqu'il s'agit de propriétés d'arrière-plan, en particulier background-position — Je fais toujours référence à mon Réponse Stack Overflow où je donne une explication détaillée sur la façon dont tout cela fonctionne. Si vous n'êtes pas à l'aise avec les astuces d'arrière-plan CSS, je vous recommande fortement de lire cette réponse pour vous aider dans la suite.

Dans l'animation, notez que le premier calque est Y=0% (placé en haut) tandis que X est-ce que ça change de 0% à 100%. Pour la deuxième couche, on a la même chose pour X mais Y=100% (placé en bas).

Pourquoi utiliser un conic-gradient() au lieu de linear-gradient()?

Bonne question! Intuitivement, nous devrions utiliser un dégradé linéaire pour créer un dégradé bicolore comme celui-ci :

linear-gradient(90deg, red 50%, blue 0)

Mais nous pouvons également obtenir la même chose en utilisant un conic-gradient() - et avec moins de code. Nous réduisons le code et apprenons également une nouvelle astuce dans le processus !

Faire glisser les couleurs vers la gauche et la droite est une bonne façon de donner l'impression que nous changeons de couleur, mais il serait peut-être préférable de changer instantanément les couleurs à la place - de cette façon, il n'y a aucune chance qu'un point de chargement clignote deux couleurs en même temps. . Pour ce faire, changeons le animationla fonction de synchronisation de linear à steps(1)

Les points du chargeur

Si vous avez suivi le premier article de cette série, je parie que vous savez ce qui va suivre : Masques CSS ! Ce qui rend les masques si géniaux, c'est qu'ils nous permettent en quelque sorte « découper » des parties d'un arrière-plan sous la forme d'un autre élément. Donc, dans ce cas, nous voulons créer quelques points, afficher les dégradés d’arrière-plan à travers les points et découper toutes les parties de l’arrière-plan qui ne font pas partie d’un point.

Nous allons utiliser radial-gradient() pour ça:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

Il y a du code dupliqué là-dedans, alors créons une variable CSS pour affiner les choses :

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

Cool cool. Mais maintenant, nous avons besoin d'une nouvelle animation qui permet de déplacer les points de haut en bas entre les dégradés animés.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

Oui, cela fait un total de trois dégradés radiaux, tous avec la même configuration et la même taille – l'animation mettra à jour la position de chacun. Notez que le X la coordonnée de chaque point est fixe. Le mask-position est défini de telle sorte que le premier point soit à gauche (0%), le deuxième au centre (50%), et le troisième à droite (100%). Nous mettons uniquement à jour le Y coordonner à partir de 0% à 100% pour faire danser les points.

Voici ce que nous obtenons :

Maintenant, combinez cela avec notre animation de dégradé et la magie commence à opérer :

Variations du chargeur de points

La variable CSS que nous avons créée dans le dernier exemple facilite grandement l'échange de nouvelles couleurs et la création de plus de variations du même chargeur. Par exemple, différentes couleurs et tailles :

Et pourquoi pas un autre mouvement pour nos points ?

Ici, tout ce que j'ai fait a été de mettre à jour l'animation pour prendre en compte différentes positions, et nous obtenons un autre chargeur avec la même structure de code !

La technique d'animation que j'ai utilisée pour les calques de masque peut également être utilisée avec les calques d'arrière-plan pour créer de nombreux chargeurs différents avec une seule couleur. J'ai écrit un article détaillé à ce sujet. Vous verrez qu’à partir de la même structure de code nous pouvons créer différentes variations en changeant simplement quelques valeurs. Je partage quelques exemples à la fin de l’article.

Pourquoi pas un chargeur avec un seul point ?

Celui-ci devrait être assez simple à comprendre car j'utilise la même technique mais avec une logique plus simple :

Voici un autre exemple de chargeur où j'anime également radial-gradient combiné avec Filtres CSS ainsi que mix-blend-mode pour créer un effet blobby :

Si vous vérifiez le code, vous verrez que tout ce que je fais là, c'est animer le background-position, exactement comme nous l'avons fait avec le chargeur précédent, mais en ajoutant une touche de background-size pour donner l'impression que la goutte grossit à mesure qu'elle absorbe les points.

Si vous voulez comprendre la magie derrière cet effet blob, vous pouvez vous référer à ces diapositives interactives (Chrome uniquement) par Ana Tudor parce qu'elle couvre si bien le sujet !

Voici une autre idée de chargeur de points, utilisant cette fois une technique différente :

Celui-ci ne contient que 10 déclarations CSS et une image clé. L'élément principal et ses deux pseudo-éléments ont la même configuration d'arrière-plan avec un seul dégradé radial. Chacun crée un point, pour un total de trois. L'animation déplace le dégradé de haut en bas en utilisant des délais différents pour chaque point.

Oh, et notez comment cette démo utilise CSS Grid. Cela nous permet d'exploiter la valeur par défaut de la grille stretch alignement de sorte que les deux pseudo-éléments couvrent toute la zone de leur parent. Pas besoin de dimensionnement ! Bougez un peu avec translate() et nous sommes tous prêts.

Plus d'exemples !

Juste pour enfoncer le clou, je souhaite vous laisser un tas d’exemples supplémentaires qui sont en réalité des variantes de ce que nous avons examiné. En visionnant les démos, vous verrez que les approches que nous avons abordées ici sont extrêmement flexibles et ouvrent des tonnes de possibilités de conception.

Ensuite…

OK, nous avons donc couvert les chargeurs de points dans cet article et les spinners dans le dernier. Dans le prochain article de cette série en quatre parties, nous porterons notre attention sur un autre type courant de chargeur : les barres. Nous prendrons une grande partie de ce que nous avons appris jusqu'à présent et verrons comment nous pouvons les étendre pour créer encore un autre chargeur d'élément unique avec aussi peu de code et autant de flexibilité que possible.

---

Chargeurs à élément unique : les points publié à l'origine le Astuces CSS. Vous devriez recevoir le bulletin.

• Coinsmart. Le meilleur échange Bitcoin et Crypto d'Europe.
• Platoblockchain. Intelligence métaverse Web3. Connaissance amplifiée. ACCÈS LIBRE.
• CryptoHawk. Radar Altcoins. Essai gratuit.
• Source : https://css-tricks.com/single-element-loaders-the-dots/