Build a scroll progress indicator
Create a horizontal progress indicator that scales as visitors scroll down the page.
We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
A scroll progress indicator helps visitors track where they are on a page.
In this lesson:
Design the progress bar
- Create a Div block
- Name it
- Set the background color so you can see what you’re styling
- Position it where you’d like it
- Give it a width of 100%
- Give it a height (e.g., 10 pixels)
- Fix its position to the top left of the viewport
- Give it a high enough z-index value that it always sits on top
Set up a scroll trigger
From the Page trigger menu in the Interactions panel, choose While page is scrolling
That’s it! So simple.
Set up a scroll animation
- From the On scroll menu in the Interactions panel, choose Play scroll animation
- Next to Scroll Animations click the plus sign
- Name it (e.g., “scroll progress”)
- Make sure your element is selected and click the plus sign at 0% and choose Scale from the dropdown
- Under Scale, change the x-axis position to 0
- Click the progress bar at 100% and under Scale change the x-axis position to 1
Cover transform origin
- In the Style panel, scroll down to Effects
- Click the More options icon (ellipsis) next to 2D & 3D transforms
- Set the Origin to the left