Scroll Progress Bar

A bar that displays the user's scroll progress down the length of the page

Diego Muralles avatar
Written by Diego Muralles
Updated this week

🚨 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.

Progress Scrollbar in Vev

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.

Did this answer your question?