Tous les articles
Squelettes de chargement animés avec Tailwind CSS
Traduit de l'article original en anglais. Lire en anglais
Squelette
- Utilisez la panoplie de classes utilitaires de Tailwind pour créer un squelette qui ressemble à peu près au contenu que vous vous apprêtez à charger.
<div class="space-y-5 rounded-2xl bg-white/5 p-4">
<div class="h-24 rounded-lg bg-rose-100/10"></div>
<div class="space-y-3">
<div class="h-3 w-3/5 rounded-lg bg-rose-100/10"></div>
<div class="h-3 w-4/5 rounded-lg bg-rose-100/20"></div>
<div class="h-3 w-2/5 rounded-lg bg-rose-100/20"></div>
</div>
</div>Superposition en dégradé
- Utilisez les arrêts de couleur de dégradé de Tailwind pour créer un dégradé qui passe du transparent au blanc, puis revient au transparent.
<div
class="
[...]
bg-gradient-to-r from-transparent via-rose-100/10 to-transparent"
></div>Animation
- Définissez une animation CSS par keyframes qui déplace les éléments de 100 % vers la droite, dans l'objet keyframes de la section extend de
tailwind.config.js. - Utilisez les valeurs arbitraires de Tailwind pour appliquer l'animation par keyframes à l'élément de superposition.
{
"keyframes": {
"shimmer": {
"100%": {
"transform": "translateX(100%)",
},
},
}
},<div class="[...] -translate-x-full animate-[shimmer_2s_infinite]"></div>Combiner le squelette et l'animation de superposition
- Ajoutez la superposition à un pseudo-élément du conteneur du squelette à l'aide du modificateur
before:de Tailwind.
<div
class="
[...]
relative
before:absolute before:inset-0
before:-translate-x-full
before:animate-[shimmer_2s_infinite]
before:bg-gradient-to-r
before:from-transparent before:via-rose-100/10 before:to-transparent"
>
[...]
</div>Touches finales
- Masquez la superposition tant qu'elle est positionnée en dehors du squelette.
- Ajoutez une ombre au squelette.
- Ajoutez une bordure subtile en haut de la superposition pour simuler un reflet de lumière.
- Vous pouvez corriger le débordement de l'animation sur les coins arrondis dans Safari avec
isolate.
<div
class="
[...]
isolate
overflow-hidden
shadow-xl shadow-black/5
before:border-t before:border-rose-100/10"
>
[...]
</div>•••
Partager cet article :
Restez informé
Recevez les derniers articles dans votre boîte mail.