The Scroll Progress element visually indicates how much of a page has been scrolled.
As users move down the page, the progress indicator updates in real time, improving navigation and content awareness—especially on long pages.
This element is available in both Elementor and WPBakery Page Builder.
Display Types
The Scroll Progress element supports two display types, controlled by the Type & Position option.
| Display Type | Description |
|---|---|
| Horizontal Progress Bar | A full-width bar that fills as the page scrolls |
| Around the Scroll To Top Button | A circular progress indicator surrounding a floating scroll-to-top button |
Horizontal Progress Bar
Positioning
When Horizontal Progress Bar is selected, the bar can be positioned using Is Fixed Position.
| Option | Description |
|---|---|
| No | Displays in normal page flow |
| Fixed on Top | Fixed to the top of the viewport |
| Under Sticky Header | Fixed below the sticky header |
| Fixed on Bottom | Fixed to the bottom of the viewport |
Style Options
| Option | Description |
|---|---|
| Thickness | Height of the progress bar |
| Border Radius | Rounded corners of the bar |
| Bar Color | Background (inactive) color |
| Active Bar Color | Color of the filled progress |
Around the Scroll To Top Button
When Around the Scroll To Top Button is selected, the progress indicator becomes a floating circular element.
Positioning
Placement is controlled with the following options:
| Option | Description |
|---|---|
| Position | Left or right side of the viewport |
| Offset X | Horizontal offset from the screen edge |
| Offset Y | Vertical offset from the screen edge |
Style Options
| Option | Description |
|---|---|
| Icon Class for Scroll To Top | Icon class (e.g. Font Awesome) |
| Size | Overall button size |
| Thickness of Progress Bar | Width of circular progress stroke |
| Icon Size | Size of the scroll-to-top icon |
| Background Color | Button background color |
| Icon Color | Icon color |
| Active Bar Color | Progress indicator color |
Usage Recommendations
- Use Horizontal Progress Bar + Under Sticky Header for long-form content
- Use Scroll To Top Button progress for clean, modern layouts
- Avoid adding multiple Scroll Progress elements on the same page
