Scroll Progress Element
Last Update: August 25, 2025
The Avada Scroll Progress Element is the perfect Element to actively show your users how far they are through a page, by showing a scroll progress bar. You can see an example of it on our blog posts as you scroll down.
Watch the video below for a visual overview of the Element, view the Avada Scroll Progress Element page for live examples, and read on to see the complete list of options.
How To Use The Scroll Progress Element
The Avada Scroll Progress Bar Element can be implemented in several different ways. With the Progress Bar Position option, it can be fixed to the Top or the Bottom of the Viewport, or it can be set to Content Flow, allowing you to place it anywhere in the content.
So the first thing to decide is where you want it positioned. With both 'Fixed To Top' and 'Fixed To Bottom' positions, the Scroll Progress Bar extends the full width of the Viewport, and regardless of where you place the Element in your page content, on the front end, it is positioned at the very top or the very bottom of the Viewport. If you have a Sticky Header, it remains above the Sticky Header when active.
When using the Content Flow Position, the Scroll Progress bar remains in the flow of content, regardless of its placement, but is then also limited to the container width you set. There is a Z Index option that allows you to ensure the bar is seen above other content, several design options to control the colors and size of the bar, and even border options.
Using The Scroll Progress Element in Avada Layouts
The Scroll Progress Element is likely even more helpful in a Layout. In this case, you need to add the Element to one of the Layout Sections assigned to the Layout. If you choose 'Fixed To Top' or 'Fixed To Bottom' positioning, then it doesn't even matter which Layout Section or where in the Layout Section it is placed. It will then display at the very Top or the Bottom of the viewport on the pages set by the condition of the Layout.
If you choose Content Flow, however, the Scroll Bar will display precisely at the position you specify in the Layout Section. In this way, for example, you could place it in a Header Layout, so that it displays at the bottom of a sticky container as the page scrolls. To add the Element in this way, consider exactly where you want the Scroll Progress bar to display.
Amongst the things to consider are whether you want the bar to go the full width of the viewport, whether you need it to be Sticky, the Z-Index, to potentially keep it on top of a Sticky header, and the margins, etc.
Element Options
Note: By default, the Element will use the global settings assigned for it in the Options > Avada Builder Elements > Scroll Progress section. Also note that the displayed option screens below show ALL the available options for the element. If you have Avada's Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.
