Chargeurs à élément unique : le Spinner

Créer des chargeurs CSS uniquement est l'une de mes tâches préférées. C'est toujours satisfaisant de regarder ces animations infinies. Et bien sûr, il y a beaucoup de techniques et d'approches pour les fabriquer - pas besoin de cherchez plus loin que CodePen pour voir combien. Dans cet article, cependant, nous verrons comment créer un chargeur à élément unique écrivant le moins de code possible.

J'ai créé une collection de plus de 500 chargeurs div uniques et dans cette série en quatre parties, je vais partager les astuces que j'ai utilisées pour créer bon nombre d'entre eux. Nous couvrirons un grand nombre d'exemples, montrant comment de petits ajustements peuvent conduire à des variations amusantes, et combien peu de code nous avons besoin d'écrire pour que tout cela se produise !

Pour ce premier article, nous allons créer l'un des modèles de chargeur les plus courants : les barres tournantes :

Voici l'approche

Une implémentation triviale pour ce chargeur consiste à créer un élément pour chaque barre enveloppée dans un élément parent (pour neuf éléments au total), puis à jouer avec opacity ainsi que transform pour obtenir l'effet de rotation.

Cependant, mon implémentation ne nécessite qu'un seul élément :

<div class="loader"></div>

…et 10 déclarations CSS :

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

Décomposons cela

À première vue, le code peut paraître étrange mais vous verrez qu'il est plus simple que ce que vous pourriez penser. La première étape consiste à définir la dimension de l'élément. Dans notre cas, c'est un 150px carré. Nous pouvons mettre aspect-ratio à utiliser pour que l'élément reste carré quoi qu'il arrive.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

Lors de la création de chargeurs CSS, j'essaie toujours d'avoir une valeur pour contrôler la taille globale. Dans ce cas, c'est le width et tous les calculs que nous couvrons feront référence à cette valeur. Cela me permet de modifier une seule valeur pour contrôler le chargeur. Il est toujours important de pouvoir ajuster facilement la taille de nos chargeurs sans avoir besoin d'ajuster de nombreuses valeurs supplémentaires.

Ensuite, nous utiliserons des dégradés pour créer les barres. C'est la partie la plus délicate ! Utilisons UN dégradé à créer deux barres comme ci-dessous :

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

Notre dégradé est défini avec une couleur et deux arrêts de couleur. Le résultat est une couleur unie sans décoloration ni transition. La taille est égale à 34% large et 8% grand. Il est également placé au centre (50%). L'astuce est d'utiliser la valeur du mot-clé space - cela duplique le dégradé, nous donnant deux barres au total.

Du la spécification:

L'image est répétée aussi souvent que possible dans la zone de positionnement d'arrière-plan sans être tronquée, puis les images sont espacées pour remplir la zone. Les première et dernière images touchent les bords de la zone.

J'utilise une largeur égale à 34% ce qui veut dire qu'on ne peut pas avoir plus de deux mesures (3*34% est supérieure 100%) mais avec deux barres nous aurons des espaces vides (100% - 2 * 34% = 32%). Cet espace est placé au centre entre les deux barres. En d’autres termes, nous utilisons une largeur pour le dégradé comprise entre 33% ainsi que 50% pour nous assurer que nous avons au moins deux barres avec un peu d'espace entre elles. La valeur space c'est ce qui les place correctement pour nous.

Nous faisons de même et créons un deuxième dégradé similaire pour obtenir deux barres supplémentaires en haut et en bas, ce qui nous donne un background valeur de la propriété de :

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

Nous pouvons optimiser cela en utilisant une variable CSS pour éviter les répétitions :

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

Nous avons donc maintenant quatre barres et, grâce aux variables CSS, nous pouvons écrire la valeur de couleur une seule fois, ce qui facilite la mise à jour ultérieure (comme nous l'avons fait avec la taille du chargeur).

Pour créer les barres restantes, exploitons le .loader élément et son ::before pseudo-élément pour obtenir quatre mesures supplémentaires pour un total de huit en tout.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

Notez l'utilisation de display: grid. Cela nous permet de nous appuyer sur la valeur par défaut de la grille stretch alignement pour que le pseudo-élément couvre toute la zone de son parent ; il n'est donc pas nécessaire d'y spécifier une dimension — encore une astuce qui réduit le code et nous évite de gérer beaucoup de valeurs !

Faisons maintenant pivoter le pseudo-élément de 45deg pour positionner les barres restantes. Survolez la démo suivante pour voir l'astuce :

Définition de l'opacité

Ce que nous essayons de faire, c'est de créer l'impression qu'il y a une barre qui laisse derrière elle une traînée de barres qui s'estompent alors qu'elle parcourt un chemin circulaire. Ce dont nous avons besoin maintenant, c'est de jouer avec la transparence de nos barres pour créer cette trace, ce que nous allons faire avec CSS. mask combiné avec un gradient conique comme suit :

mask: conic-gradient(from 22deg,#0003,#000);

Pour mieux voir l'astuce, appliquons ceci à une boîte en couleur :

La transparence de la couleur rouge augmente progressivement dans le sens des aiguilles d'une montre. Nous appliquons cela à notre chargeur et nous avons les barres avec différentes opacités :

En réalité, chaque barre semble s'estomper car elle est masquée par un dégradé et se situe entre deux couleurs semi-transparentes. C'est à peine perceptible lorsque cela s'exécute, donc c'est un peu comme pouvoir dire que toutes les barres ont la même couleur avec un niveau d'opacité différent.

La rotation

Appliquons une animation de rotation pour obtenir notre chargeur. Notez que nous avons besoin d'une animation par étapes et non continue, c'est pourquoi j'utilise steps(8). 8 n'est rien d'autre que le nombre de barres, de sorte que cette valeur peut être modifiée en fonction du nombre de barres utilisées.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

C'est ça! Nous avons notre chargeur avec un seul élément et quelques lignes de CSS. Nous pouvons facilement contrôler sa taille et sa couleur en ajustant une valeur.

Puisque nous avons utilisé uniquement le ::before pseudo-élément, nous pouvons ajouter quatre barres supplémentaires en utilisant ::after pour finir avec 12 barres au total et quasiment le même code :

Nous mettons à jour la rotation de nos pseudo-éléments pour considérer 30deg ainsi que 60deg au lieu de 45deg tout en utilisant une animation en douze étapes, au lieu de huit. J'ai également diminué la hauteur à 5% au lieu de 8% pour rendre les barres un peu plus fines.

Notez également que nous avons grid-area: 1/1 sur les pseudo-éléments. Cela nous permet de les placer dans la même zone les uns que les autres, empilés les uns sur les autres.

Devinez quoi? Nous pouvons accéder au même chargeur en utilisant une autre implémentation :

Pouvez-vous comprendre la logique derrière le code ? Voici un indice : l'opacité n'est plus gérée avec un CSS mask mais à l'intérieur du dégradé et utilise également le opacity propriété.

Pourquoi pas des points à la place ?

Nous pouvons tout à fait faire cela :

Si vous vérifiez le code, vous verrez que nous travaillons désormais avec un dégradé radial au lieu d'un dégradé linéaire. Sinon, le concept est exactement le même où le masque crée une impression d'opacité, mais nous avons réalisé les formes sous forme de cercles au lieu de lignes.

Vous trouverez ci-dessous une figure pour illustrer la nouvelle configuration du dégradé :

Si vous utilisez Safari, notez que la démo peut être boguée. C'est parce que Safari ne prend actuellement pas en charge le at syntaxe en dégradés radiaux. Mais nous pouvons reconfigurer un peu le dégradé pour surmonter cela :

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

Plus d'exemples de chargeurs

Voici une autre idée de chargeur rotatif similaire à la précédente.

Pour celui-ci, je compte uniquement sur background ainsi que mask pour créer la forme (aucun pseudo-élément nécessaire). Je définis également la configuration avec des variables CSS pour pouvoir créer de nombreuses variations à partir du même code – un autre exemple des pouvoirs des variables CSS. J'ai écrit un autre article sur cette technique si vous voulez plus de détails.

Notez que certains navigateurs s'appuient encore sur un -webkit- préfixe pour mask-composite avec son propre ensemble de valeurs et n'affichera pas le spinner dans la démo. Voici une façon de le faire sans mast-composite pour plus de support du navigateur.

J'en ai un autre pour toi :

Pour celui-ci, j'utilise un background-color pour contrôler la couleur et utiliser mask ainsi que mask-composite pour créer la forme finale :

Avant de terminer, voici quelques autres chargeurs tournants que j'ai fabriqués il y a quelque temps. Je m'appuie sur différentes techniques mais j'utilise toujours des dégradés, des masques, des pseudo-éléments, etc. Cela pourrait être un bon exercice pour comprendre la logique de chacune et apprendre de nouvelles astuces en même temps. Cela dit, si vous avez des questions à leur sujet, la section commentaires se trouve ci-dessous.

Emballage en place

Vous voyez, nous pouvons faire tellement de choses en CSS avec rien d'autre qu'un seul div, quelques dégradés, pseudo-éléments, variables. Il semble que nous ayons créé tout un tas de chargeurs rotatifs différents, mais ils sont tous fondamentalement identiques avec de légères modifications.

Ce n'est que le début. Dans cette série, nous examinerons davantage d'idées et de concepts avancés pour créer des chargeurs CSS.

---

Chargeurs à élément unique : le Spinner 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-spinner/