Create a horizontal progress indicator that scales as visitors scroll down the page.
A scroll progress indicator helps visitors track where they are on a page.
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
From the Page trigger menu in the Interactions panel, choose While page is scrolling
That’s it! So simple.
- 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
- 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