Reading Progress Bar
Ever start reading a long article and wonder how much is left? So do your visitors. The Reading Progress Bar by Master Addons fixes that. It’s a thin, smart bar that fills up as you scroll down the page. You can add it to any page or post in seconds from right inside Elementor’s Page Settings. Customize its colors, position, and speed to match your site perfectly. It’s a tiny touch that makes your content feel more engaging and easier to navigate. Let your readers see their progress and stick around until the very end.
Turn It On and Place It Where You Want
No coding, no fuss. Just flip the “Enable Reading Progress Bar” switch in your page settings. Then decide where it should live – stuck to the top of the viewport is the classic spot, but it’s your choice. It automatically detects the full page height and starts filling up the moment a visitor starts scrolling.
- One-Switch Enable: Find the setting right in the Page Settings panel under “General Settings” and turn it on globally or for just one page.
- Top or Bottom: Choose Position to lock the bar to the top or bottom of the screen so it’s always visible.
- Automatic Tracking: The bar intelligently calculates the total page length and updates the fill in real-time as the user scrolls.
Make It Look Like Part of Your Brand
A default blue bar might not fit your site. That’s why you get full control over how it looks. Match your brand colors, adjust the thickness, and control how smoothly it animates. Make it subtle or make it stand out- it’s completely up to you and your design.
- Custom Colors: Set two colors: the Background Color for the empty track and the Fill Color for the moving progress.
- Adjust the Thickness: Use the Height field (like 5px or 10px) to make the bar thin and discreet or thick and bold.
- Tune the Animation: Control the Animation Speed so the bar fills up smoothly and feels natural, not jumpy or slow.
Frequently Asked Questions For Reading Progress Bar
Does the progress bar work on mobile phones?
Yep, it sure does! The bar is fully responsive. It’ll show up at the top (or bottom) of the screen on phones and tablets, adjusting its size and behavior to work perfectly on smaller screens.
Can I add this to some pages but not others?
Absolutely. Since it’s controlled from the Page Settings for each individual page or post you create with Elementor, you have total control. Enable it on your long blog posts and tutorials, and leave it off your short contact page. It’s a per-page decision.
Will this slow down my website?
Not at all. It’s a very lightweight feature that uses minimal resources. It’s just a bit of CSS and JavaScript to calculate the scroll position. You won’t notice any impact on your page loading speed.
What if the bar color clashes with my header menu?
That’s the best part – you can fix that in seconds. Just go into the settings and change the Background Color and Fill Color to anything you want. Pick colors that contrast nicely with your header so the bar is always visible but never clashes.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
Post/Page Duplicator
