Scroll progress indicator

Create a horizontal progress indicator that scales as visitors scroll down the page.

This video features an old UI. Updated version coming soon!
 
This video features an old UI. Updated version coming soon!

A scroll progress indicator helps visitors track where they are on a page. 

In this lesson:

  1. Design the progress bar
  2. Set up a scroll trigger
  3. Set up a scroll animation
  4. Cover transform origin

Design the progress bar

  1. Create a Div block
  2. Name it
  3. Set the background color so you can see what you’re styling
  4. Position it where you’d like it
  5. Give it a width of 100%
  6. Give it a height (e.g., 10 pixels)
  7. Fix its position to the top left of the viewport
  8. 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

  1. From the On scroll menu in the Interactions panel, choose Play scroll animation
  2. Next to Scroll Animations click the plus sign
  3. Name it (e.g., “scroll progress”)
  4. Make sure your element is selected and click the plus sign at 0% and choose Scale from the dropdown
  5. Under Scale, change the x-axis position to 0
  6. Click the progress bar at 100% and under Scale change the x-axis position to 1

Cover transform origin

  1. In the Style panel, scroll down to Effects
  2. Click the More options icon (ellipsis) next to 2D & 3D transforms
  3. Set the Origin to the left
Clone this project
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback