Comment ajouter un skeleton loader dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter un skeleton loader dans Webflow pour améliorer la perception de vitesse de chargement.

Exemple

1. Créez les éléments skeleton dans Webflow

Créez des Divs ayant la même taille et disposition que votre contenu réel. Attribuez-leur la classe skeleton. Ces éléments seront visibles pendant le chargement et cachés une fois le contenu prêt.

2. Ajoutez l'animation CSS dans un embed

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

3. Masquez les skeletons une fois le contenu chargé

window.addEventListener('load', function() {
  document.querySelectorAll('.skeleton').forEach(function(el) {
    el.style.display = 'none';
  });
  document.querySelectorAll('.real-content').forEach(function(el) {
    el.style.display = 'block';
  });
});

Conclusion

Le skeleton loader améliore la perception de vitesse sans modifier les performances réelles. Cas d'usage :

• Cartes de collection CMS chargées dynamiquement
• Images en lazy load
• Contenu injecté via API ou embed