How to create a "scroll progress" bar on Webflow? | Tutorial

Tutorial
March 20, 2023
3 min
Yellow progress bar completing with Webflow logo.
Key points

Discover in this tutorial how to create a horizontal progress indicator (progress bar) that advances as visitors scroll through your Webflow site.

Video Tutorial

The Tutorial in 4 Steps

1. Create and Design the Bar

  • Create a div block "wrapper"
  • Name it (e.g.: scroll-progress_wrapper)
  • Set the position of this div block to "Fixed or Sticky" and give it a sufficiently high z-index value so that it always remains in the foreground.
  • Create two child div blocks within the scroll-progress_wrapper div block
  • Assign them a name and a different color
  • Add an absolute position to these two divs so they overlap
  • Set both divs to have a width of 100% and the height you desire (3rem in the video tutorial)
div block in Fixed position on Webflow

2. Add the Animation Trigger

Select the "body" element of your page and add a trigger ⚡️ to this element. In the "Page Trigger" menu of the Interactions panel, choose an animation of the type "While page is scrolling".

Webflow Animation 'while page is scrolling'

3. Create the "Scroll" Animation

  • Give it a name (for example, "scroll_progress_indicator").
  • Make sure your element (the progress bar) is selected, then click the + sign at 0% and choose "Scale" from the animation options dropdown.
  • Once scale is selected, adjust the x-axis position to 0. (⚠️ Be careful to only modify the x-axis value)
  • Click on your element at 100%, and still on Scale, change the x-axis value to 1.
Webflow Animation Scale from 0 to 100%

4. Adjust the Origin of Your Horizontal Progress Bar

If your animation starts from the center outward, don’t worry, it’s "normal"! To change this, you need to set an origin that will determine the direction of your progress bar.

It's very simple:

  • Select your 'scroll-progress' div
  • Scroll down the style panel to Effects.
  • Click the More options (...) icon next to 2D and 3D Transformations.
  • Set the origin to the left (if you want the progress bar to advance from left to right)
Transform origin settings panel on Webflow
Adjusting the origin of an element (2D & 3D Transforms)

Want to learn more about Webflow? Check out our tips to only disable horizontal scrolling for a Webflow section or:

👉 Explore the Digidop Academy

👉 Discover our YouTube channel

👉 Check out our blog with over 300 articles

Florian Bodelot
Florian Bodelot
Co-founder

Suggested articles

A woman speaks on stage at a conference, wearing a headset microphone. Behind her, a large black screen displays the question “What then?” in bold white text.
Events
Webflow

Digidop attends FLOWconf 2025, the biggest Webflow & marketing event in Europe.

Digidop attends FLOWconf 2025, the biggest Webflow & marketing event in Europe.
Visual overview of several modern web typefaces in 2025, each displayed on a vibrant background: Editorial New, DM Serif Display, Aeonik, SF Pro Rounded, Rader, Champ, Monument, Canicule, Clash Display, Supply, Agrandir, and more — a graphic composition highlighting typographic diversity.
Documentation
Design

The 20 Best Fonts for a Modern and Impactful Website in 2025

The 20 Best Fonts for a Modern and Impactful Website in 2025
Mosaic of homepage designs from several Webflow agencies (Digidop, N4, Refokus, Flow Ninja, Tonik, Finsweet, Edgar Allan), showcasing diverse creative approaches and visual identities centered around the Webflow logo.
Storytelling
Webflow

My Top 7 Webflow Agencies in 2025 (From a Founder’s Perspective)

My Top 7 Webflow Agencies in 2025 (From a Founder’s Perspective)

Want to turn your website into your most valuable asset?

Contact us today