Scroll Progress

Avada Scroll Progress Element Examples

The Avada Scroll Progress Element gives your users a visible indicator of how far they’ve gone through a page by displaying a progress bar that dynamically fills as they scroll, helping with user orientation (especially on long posts or landing pages). You can position it at the top or bottom of the viewport, let it follow the content flow, adjust the height, color, and set a high z-index to ensure it’s always visible when needed.

Donec rutrum congue leo eget malesuada.

Nulla quis lorem ut libero malesuada feugiat. Donec sollicitudin molestie malesuada. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem ut libero malesuada feugiat. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla quis lorem ut libero malesuada feugiat. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.

Vivamus magna justo lacinia eget consectetur sed.

Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Donec rutrum congue leo eget malesuada.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id orci porta dapibus.

The Avada Scroll Progress Element visually indicates how far a user has scrolled down a page, enhancing navigation and engagement. As users navigate through your content, the progress bar fills in real-time, providing them with a clear sense of their position on the page or post.

Examples can include the individual option values set for that particular instance; however, in some cases, not all Element variations can be shown as they may be too numerous. Where a live example cannot be shown, an image representation will be used as a substitute. For more detailed information, please refer to the related Element documentation and videos.