π¨ Important π¨ This article contains image assets of our latest "Add Menu" layout. We are currently transitioning to this new version. We highly encourage you to activate this version by enabling the toggle found in the "Experimental Features" section of your profile settings, located at the bottom of the page.
The Scroll Progress Bar visually represents the progress as a user scrolls up or down a page. It helps users track their progress and navigate lengthy content more easily by showing how far they've scrolled down a page.
Adding a Scroll Progress Bar
From the left panel, click on Add component (Shortcut:
M
)Search for and select Scroll Progress Bar
Click and drag the element onto your canvas
Styling a Scroll Progress Bar Component
Background:
Container: Change the component's container background
PR: Change the Progress Bar's color
Pro Tip: To ensure the Scroll bar appears on all of the necessary pages in your project, pin it at the top of the layers panel.