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
Pro widget

Reading Progress Widget for Elementor Pro

A reading progress bar and a back to top button

Overview

What Reading Progress does

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.

Live demo

See it in action

Features

What it can do

  • Progress bar fixed to the top or the bottom of the screen

  • Measures the whole page or only the article

  • Optional percentage bubble on the bar that appears while scrolling

  • Back to top button with an optional progress ring around it

  • Button can show an icon, the percentage, or the percentage with the icon on hover

  • Button sits on the left or right and appears after a scroll distance you set

  • Bar and button can be turned on or off separately

  • Bar fill supports a second color for a gradient

Use cases

When to use it

Blog articles

Show readers how far they are through a post. Set Progress Of to The Article Only so comments and the footer do not count.

Back to top only

Turn off Show the Bar and keep the button. Visitors on long pages get a quick way back to the top.

Under a sticky header

Use Distance From the Edge in the Style tab to move the bar below a sticky site header.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  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.

FAQ

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.

Bright Addons Pro

Get Reading Progress with Bright Addons Pro

Bright Addons Pro has 77 Pro widgets plus all 48 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $16 a year, with a 14-day money-back guarantee.