Comment créer un liquide loader stylé sur Webflow ?

Les loaders avec des effets visuels engageants sont essentiels pour offrir une expérience utilisateur attrayante. Dans cet article, nous allons explorer comment créer un effet "liquide" pour un loader sur Webflow, où des points semblent se coller les uns aux autres lors du chargement de la page. Ce tutoriel utilise uniquement des propriétés CSS disponibles dans Webflow, sans aucun code personnalisé.

Résumé de la méthode pour créer un loader liquid dans Webflow

Pour créer un effet collant sur un loader dans Webflow, vous allez construire une structure de base avec des divs, appliquer des animations CSS pour simuler le mouvement, puis ajouter des effets de contraste et de flou pour obtenir l’effet collant. Le tout est fait directement dans Webflow, sans code supplémentaire.

Étape 1 : Créer la Structure de Base

1. Créer une Section et un Conteneur :
   • Dans un projet vierge, commencez par ajouter une div appelée section-loader.
   • Ajoutez une deuxième div à l'intérieur de la section, nommée container-loader.
2. Configurer les Propriétés de la Section :
   • Réglez la hauteur de la section-loader à 100VH pour qu'elle prenne toute la hauteur de la fenêtre.
   • Pour le container-loader, définissez la hauteur et la largeur à 100% et appliquez un fond coloré, par exemple en bleu.
3. Aligner le Contenu au Centre :
   • Configurez le container-loader en display: flex et centrez le contenu à la fois horizontalement et verticalement.

Étape 2 : Ajouter les Points

1. Créer les Points :
   • Ajoutez une nouvelle div à l'intérieur du container-loader et nommez-la loader-dot.
   • Donnez-lui une largeur et une hauteur de 2,5rem, un fond blanc, et appliquez un border-radius de 100% pour créer un cercle.
2. Dupliquer les Points :
   • Dupliquez ce point plusieurs fois pour créer les autres points du loader.
3. Organiser les Points dans un Wrapper :
   • Regroupez les trois derniers points dans une div appelée loader-dot-wrapper.
   • Configurez ce wrapper avec display: flex et appliquez un gap de 0,5rem pour espacer les points.

Étape 3 : Animer les Points

1. Configurer l'Animation de Chargement :
   • Allez dans les interactions et configurez un page trigger pour démarrer l'animation à la fin du chargement de la page.
   • Créez une animation appelée loader-animation où les points se déplacent d'un côté à l'autre.
2. Animer les Points Individuellement :
   • Pour les points du loader-dot-wrapper, configurez une animation de mouvement sur l'axe X avec une translation de -35% à 0%.
   • Pour le point individuel, configurez une animation de mouvement de 0% à 360% sur l'axe X.
3. Ajuster la Fluidité de l'Animation :
   • Appliquez une transition IN OUT expo et ajustez la durée à 1,5s pour une animation plus fluide.

Étape 4 : Ajouter l'Effet Collant

1. Appliquer les Filtres CSS :
   • Sélectionnez le container-loader et ajoutez un filtre de contraste à 2000%.
   • Pour chaque loader-dot, ajoutez un filtre de blur à 6px.
2. Vérifier l'Effet Collant :
   • Testez l'animation en prévisualisation pour vous assurer que les points semblent se coller entre eux lorsqu'ils se rapprochent.

‍

Créer un effet collant pour un loader sur Webflow est un excellent moyen d'ajouter une touche de dynamisme à votre site. En utilisant des propriétés CSS simples et les outils d'animation de Webflow, vous pouvez créer des effets visuels impressionnants sans écrire une seule ligne de code.

‍