Chargeurs à élément unique : les barres

Nous avons examiné les filateurs. Nous avons examiné les points. Nous allons maintenant aborder un autre modèle courant pour les chargeurs : barres. Et nous allons faire la même chose dans ce troisième article de la série que les autres en le réalisant avec un seul élément et avec un CSS flexible qui facilite la création de variations.

Commençons par non pas un, ni deux, mais 20 exemples de chargeurs de barres.

Quoi?! Allez-vous détailler chacun d’eux ? C'est trop pour un article !

Cela peut ressembler à cela à première vue ! Mais tous reposent sur la même structure de code et nous ne mettons à jour que quelques valeurs pour créer des variations. C'est toute la puissance du CSS. Nous n'apprenons pas comment créer un chargeur, mais nous apprenons différentes techniques qui nous permettent de créer autant de chargeurs que nous le souhaitons en utilisant simplement la même structure de code.

Faisons quelques barres !

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

.bars { width: 45px; aspect-ratio: 1;
}

Nous avons en quelque sorte « simulé » trois barres avec un dégradé linéaire en arrière-plan – très similaire à la façon dont nous avons créé les chargeurs de points dans la partie 2 de cette série.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

Le code ci-dessus nous donnera le résultat suivant :

Comme les autres articles de cette série, nous allons aborder de nombreux background tromperie. Donc, si jamais vous avez l’impression que nous allons trop vite ou si vous avez besoin d’un peu plus de détails, n’hésitez pas à les consulter. Vous pouvez également lire mon Réponse Stack Overflow où je donne une explication détaillée sur la façon dont tout cela fonctionne.

Animer les barres

Nous animons la taille ou la position de l'élément pour créer le chargeur de barres. Animons la taille en définissant les images clés d'animation suivantes :

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

Vous voyez ce qui se passe là-bas ? Entre 0% et 100%, l'animation modifie la background-size du dégradé d'arrière-plan de l'élément. Chaque image clé définit trois tailles d'arrière-plan (une pour chaque dégradé).

Et voici ce que nous obtenons :

Pouvez-vous commencer à imaginer toutes les variations possibles que l'on peut obtenir en jouant avec différentes configurations d'animation pour les tailles ou les positions ?

Fixons la taille à 20% 50% et mettez à jour les positions cette fois-ci :

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…ce qui nous rapporte un autre chargeur !

Vous avez probablement déjà compris le truc. Il vous suffit de définir une timeline que vous traduisez en image clé. En animant la taille, la position — ou les deux ! — il existe un nombre infini de possibilités de chargement à portée de main.

Et une fois que nous serons à l'aise avec une telle technique, nous pourrons aller plus loin et utiliser un dégradé plus complexe pour créer encore plus de couleurs. PLUS chargeurs.

Attendez-vous aux deux derniers exemples de cette démo, tous les chargeurs de barres utilisent le même balisage et les mêmes styles sous-jacents et différentes combinaisons d'animations. Ouvrez le code et essayez de visualiser chaque image indépendamment ; vous verrez à quel point il est relativement trivial d'en faire des dizaines - sinon des centaines - de variantes.

Devenir chic

Vous souvenez-vous du tour de masque que nous avons fait avec les chargeurs de points dans le deuxième article de cette série? Nous pouvons faire la même chose ici !

Si nous appliquons toute la logique ci-dessus à l'intérieur du mask propriété, nous pouvons utiliser n'importe quelle configuration d'arrière-plan pour ajouter une coloration sophistiquée à nos chargeurs.

Prenons une démo et mettons-la à jour :

Tout ce que j'ai fait, c'est mettre à jour tous les background-* avec mask-* et j'ai ajouté une coloration dégradée. Aussi simple que cela et pourtant nous obtenons un autre chargeur sympa.

Il n'y a donc aucune différence entre les points et les barres ?

Aucune différence! J'ai écrit deux articles différents pour couvrir autant d'exemples que possible mais dans les deux, je m'appuie sur les mêmes techniques :

1. Dégradés pour créer les formes (points ou barres ou peut-être autre chose)
2. Animation background-size (facultatif) background-position pour créer l'animation du chargeur
3. Ajout de masque pour ajouter une touche de couleurs

Arrondir les barres

Essayons cette fois quelque chose de différent en arrondissant les bords de nos barres.

Utiliser un élément et son ::before ainsi que ::after pseudos, on définit trois barres identiques :

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Cela nous donne trois barres, cette fois sans faire appel à un dégradé linéaire :

L’astuce consiste maintenant à remplir ces barres avec un joli dégradé. Pour simuler un dégradé continu, il faut jouer avec background propriétés. Dans la figure ci-dessus, la zone verte définit la zone couverte par le chargeur. Cette zone devrait avoir la taille du dégradé et, si nous faisons le calcul, cela équivaut à multiplier les deux côtés étiquetés S dans le diagramme, ou background-size: var(--s) var(--s).

Étant donné que nos éléments sont placés individuellement, nous devons mettre à jour la position du dégradé à l'intérieur de chacun pour nous assurer qu'ils se chevauchent tous. De cette façon, nous simulons un gradient continu même s'il y en a en réalité trois.

Pour l'élément principal (placé au centre), le fond doit être au centre. Nous utilisons les éléments suivants :

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

Pour le pseudo-élément de gauche, nous avons besoin du fond de gauche

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

Et pour le pseudo de droite, il faut positionner le fond à droite :

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

En utilisant la même variable CSS, --_i, que nous avons utilisé pour la traduction, nous pouvons écrire le code comme ceci :

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Il ne nous reste plus qu'à animer la hauteur et ajouter quelques délais ! Voici trois exemples où seules les couleurs et les tailles sont différentes :

Emballage en place

J'espère que jusqu'à présent, vous vous sentez très encouragé par tous les pouvoirs dont vous disposez pour créer des animations de chargement complexes. Tout ce dont nous avons besoin est d'un élément, soit des dégradés, soit des pseudos pour dessiner les barres, puis de quelques images clés pour déplacer les choses. C'est toute la recette pour obtenir un nombre infini de possibilités, alors sortez et commencez à cuisiner des choses intéressantes !

En attendant le prochain article, je vous laisse avec une drôle de collection de chargeurs où je combine les points ainsi que les barres!

---

Chargeurs à élément unique : les barres 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-bars/