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:

  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

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top