Scroll progress indicator

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Scroll progress indicator

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

  1. From the On Current Page 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 Animation 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 Transitions & Transforms
  2. Click the cog icon next to Transforms
  3. Set the Transform Origin to the left

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form