BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Guide

Reading Progress Pro

How to set up and style the Reading Progress widget in Elementor.

Reading Progress shows a thin bar at the top or bottom of the screen that fills as the visitor scrolls. It also adds a back to top button that can carry a progress ring or the percentage read. Use it on long articles and guides.

Part of: Bright Addons Pro.

See the widget page and live demo

Set it up

  1. Drag the Reading Progress widget anywhere on the page. The bar and button are fixed to the screen, so the spot does not matter.

  2. In the Progress Bar section, keep Show the Bar on and choose a Position: Top of the Screen or Bottom of the Screen.

  3. Set Progress Of to The Whole Page or The Article Only.

  4. In the Back to Top Button section, choose what goes Inside the Button and pick a Side.

  5. Set Show After Scrolling (px) to decide when the button appears.

  6. Open the Style tab to set the bar height and colors, and the button size, colors and ring.

  7. Open the page on the live site and scroll to check the result.

Content options

Progress Bar

Option What it does
Show the Bar Turns the progress bar on or off.
Position Fixes the bar to the top or the bottom of the screen.
Progress Of Measures the whole page or only the article.
Article (CSS selector) The element to measure in article mode. Empty finds the main content automatically.
Percentage Bubble on the Bar Adds a small bubble with the percentage read.

Back to Top Button

Option What it does
Show the Button Turns the back to top button on or off.
Progress Ring Around the Button Draws a ring around the button that fills with the reading progress.
Inside the Button Shows an icon, the percentage, or the percentage that changes to the icon on hover.
Icon The icon inside the button, an up arrow by default.
Side Puts the button on the left or right of the screen.
Show After Scrolling (px) The button appears after the visitor scrolls this far. The default is 400.
Screen Reader Label The label read by screen readers for the button.
Bright Addons Pro

Unlock this and 70+ more Pro widgets

One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $16 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Progress Bar

    height, distance from the edge, fill color, second fill color for a gradient, track color, end rounding, shadow and bubble typography.

  • Back to Top Button

    size, icon or text size, distance from the side and bottom, colors for normal and hover, border, radius, shadow, and the ring width and colors.

Tips

  • The bar and button do not move inside the Elementor editor. Check them on the live page or in preview.

  • In article mode, a short article that fits on one screen counts as fully read once its end is visible.

  • The Border Radius setting of the button is only available when the progress ring is off.

  • If both Show the Bar and Show the Button are off, the widget prints nothing.

Questions and answers

Where should I place the widget on the page?

Anywhere. The bar is fixed to the top or bottom of the screen and the button to a bottom corner, no matter where the widget sits in the layout.

How does it know where the article is?

With Progress Of set to The Article Only, it uses your CSS selector if you enter one. Otherwise it looks for the main content of the post or page automatically.

Can I use only the back to top button?

Yes. Turn off Show the Bar in the Progress Bar section and keep Show the Button on.

Does the button scroll smoothly?

Yes, it scrolls back to the top smoothly. Visitors who ask their device for reduced motion get an instant jump instead.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides