Create a "scroll progress" bar on Webflow site

Discover in this tutorial how to create a horizontal progress indicator (fill bar) that evolves as your Webflow site visitors scroll down the page.

The video tutorial

The tutorial in 4 steps

1. Create and design the bar

Create a "wrapper" div block
Give it a name(Ex: scroll-progresss_wrapper)
Define a "Fixed or sticky" position for this div block and add a z-index value high enough so that it is always in the foreground.
Create two child block divs to the scroll-progresss_wrapper block div
Give them a name and a different color
Add an absolute position to these two divs so that they overlap
Give these two divs a width (widht) of 100% and the height you want (3rem in the video tutorial)

2. Add the animation trigger

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

Webflow animation "while page is scrolling

3. Create the "scroll" animation

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

Webflow Animation Scale of an element from 0 to 100%.

4. Change the origin of your horizontal progress bar

If your animation goes from the center to the outside, don't panic, it's "normal"! To change it, you have to define an origin which will give a direction to your progress bar.

It's very simple:

Select your 'scroll-progress' div
Scroll down the style panel to Effects.
Click on the More Options icon (...) next to 2D and 3D Transformations.
Set the origin to the left (if you want the progress bar to move from left to right)