All Collections
Vev Components
Adding a Scroll Progress Bar
Adding a 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 provides a visual representation of progress as a user scrolls up or down a page.

Progress Scrollbar in Vev

๐Ÿ‘๐Ÿฝ Adding a Scroll Progress Bar

  • From the top menu bar, click on the Add Menu (Shortcut: M)

  • Search for and select Scroll Progress Bar

  • Click and drag the element onto your canvas

Tip: To have the element display on all of the necessary pages in your project, pin it at the top of the styles panel.

๐ŸŽจ Styling a Scroll Progress Bar element

  • Background:

    • Container: Change the element's container background

    • PR: Change the Progress Bar's color

  • Effects: Add different types of shadows or blur effects. Learn more about effects

Did this answer your question?