Comment créer une barre "scroll progress" sur site Webflow ? | Tutoriel

Tutoriel
October 10, 2022
3 min
Barre de progression jaune se complétant avec logo de Webflow
Key points

Découvrez dans ce tutoriel comment créer un indicateur de progression horizontale (barre de remplissage) qui évolue au fur et à mesure que les visiteurs de votre site Webflow font défiler la page.

Le tutoriel en vidéo

Le tutoriel en 4 étapes

1. Créer et designer la barre

  • Créer un div block "wrapper"
  • Lui donner un nom (Ex : scroll-progresss_wrapper)
  • Définir une position "Fixed ou sticky" à ce div block et lui ajouter une valeur z-index suffisamment élevé pour qu'il se trouve toujours au premier plan.
  • Créer deux divs blocs enfants au div block scroll-progresss_wrapper
  • Donner leurs un nom et une couleur différente
  • Ajouter une position absolute à ces deux divs afin qu'ils se superposent
  • Donner à ces deux divs une largeur (widht) de 100% et la hauteur que vous souhaitez (3rem dans le tutoriel vidéo)
div bloc en position Fixed sur Webflow

2. Ajouter le déclencheur de l'animation

Sélectionner l'élément "body" de votre page et ajouter un trigger ⚡️ sur cet élément. Dans le menu " Page Trigger " du panneau Interactions, choisissez une animation de type "While page is scrolling".

Animation Webflow "while page is scrolling"

3. Créer l'animation "au scroll"

  • Donnez-lui un nom (par exemple, "scroll_progress_indicator").
  • Assurez-vous que votre élément (barre de remplissage) soit sélectionné, puis cliquez sur le signe + à 0 % et choisissez "Scale" dans la liste déroulante des options d'animations.
  • Une fois scale sélectionné, modifiez la position de l'axe des x à 0. ( ⚠️ Attention à ne modifier que la valeur de l'axe des X)
  • Cliquez sur votre élément à 100 % et, toujours sur Scale, changez la valeur de l'axe des x à 1.
Animation Webflow Scale d'un élément de 0 à 100%

4. Modifier l'origine de votre barre de progression horizontale

Si votre animation part du centre vers les extérieurs, pas de panique, c'est "normal" ! Pour le modifier, il faut définir une origine qui donnera une direction à votre barre de progression.

Pour ça, c'est très simple :

  • Sélectionner votre div 'scroll-progress"
  • Faites défiler le panneau de style vers le bas jusqu'à Effets.
  • Cliquez sur l'icône Plus d'options (...) à côté de Transformations 2D et 3D.
  • Définissez l'origine vers la gauche (si vous souhaitez que la barre de progression, progresse de gauche à droite)
Panneau des paramètres transform origin sur Webflow
Modification de l'origine d'un élément (2D & 3D Transforms)

Envie d'en apprendre plus sur Webflow ? Découvre notre tips pour ne désactiver que le scroll horizontal d'une section webflow ou :

👉 Découvre la Digidop Académie

👉 Découvre notre chaîne Youtube

👉 Découvre notre blog avec +300 articles

Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

Visuel avec code javascript personnalisé et logos d'outils IA populaires : Open AI, cursor, Claude, github copilot, etc.
Documentation
IA

IA et développement web, une révolution technologique en cours

IA et développement web, une révolution technologique en cours
Make vs n8n vs Zapier
Documentation
NoCode

n8n vs Make vs Zapier : comparatif complet pour automatiser vos workflows en 2025

n8n vs Make vs Zapier : comparatif complet pour automatiser vos workflows en 2025
photo noir et blanc d’un expert digital marketing pris de dos entrain de présenter un projet de communication sur son ordinateur à un client
News
SEO

Les 10 meilleures agences digitales et communication pour les professionnels de la finance en 2025

Les 10 meilleures agences digitales et communication pour les professionnels de la finance en 2025

Transformez votre site web en un moteur de croissance.

Nous contacter