Pour rendre vos blog posts plus interactifs ou simplement améliorer l’expérience utilisateur de vos pages sur Webflow, vous pouvez ajoutez une barre de progression (barre de remplissage) qui indique où vous en êtes dans la page et ce qu’il vous reste à lire.

‍

Tanguy vous a réalisé un petit tutoriel sur Youtube 😏👇

‍

Le tutoriel en vidéo

‍

‍

Mais pour ceux qui préfère la lecture, je vous explique comment créer une barre indicateur de scroll sur Webflow dans cet article ! 👍🏼

‍

Les étapes pour créer votre barre de progression

‍

• Pour commencer, il suffit d’ajouter un Div Block dans la nav bar afin qu’il prenne toute la largeur de l’écran.

‍

‍

On l’ajoute dans la nav bar car cette dernière est en position sticky, elle ne bougera donc pas et restera en haut de l’écran lorsque l’on scroll. Mais vous pouvez aussi faire un sorte que votre div soit en position sticky et qu’il ne soit pas enfant de la nav bar.

‍

• Ensuite renommer le Div Block par “nav_progress” et définissez à 100% la largeur (”width”) et à 1 REM la hauteur (”height”).

‍

• Vous intégrer ensuite un autre Div Block à l’intérieur du premier que vous renommez “nav_progress-bar”.

‍

• Et vous le paramétrer également à 1 REM de hauteur (”height”) mais vous pouvez laisser la largeur (”width”) à 0. En plus, vous ajoutez une couleur à l’intérieur de votre Div Block : “nav_progress-bar”.

‍

‍

• Une fois ce Div Block intégré, il ne vous reste plus qu’à animer votre barre de progression pour qu’elle fonctionne.

‍

• Pour cela, vous allez dans l’onglet animation ⚡️ et vous sélectionnez “While page is scrolling” depuis “Page trigger”.

‍

‍

• Une fois dessus, vous créer une nouvelle animation en cliquant sur le ➕ à droite de “Scroll Actions” que vous nommez “Progress Bar”.

‍

• Vous sélectionnez alors votre Div Block “nav-progress_bar” et vous venez ajouter une animation de taille “Size” en cliquant sur le ➕ à côté du 0%.

‍

‍

• Et vous réglez la largeur “Width” à 0% (en bas).

‍

• Vous cliquez ensuite sur l’animation à 100% (qui correspond au bas de la page) et vous réglez la largeur “Width” à 100%.

‍

‍

• Vous sauvegardez votre animation, et c’est fini ! 🤩

‍

Vous n’avez plus qu’à vous rendre sur la preview de Webflow et à scroller, normalement votre barre de progression “indicateur de scroll” devrait fonctionner ! ✅

‍

‍

J’espère que ce tutoriel de création de barre de progression sur Webflow vous aura aidé et à bientôt 👋🏼