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 over a week ago

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?