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

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?