How To Use The Reading Progress Widget By Atomic Addons

The Reading Progress widget by Atomic Addons shows visitors how far they have scrolled through a page. It comes in four skins: a ring with a percentage in a corner, a ring that doubles as a back to top button, a ring that follows the mouse pointer, and a thin bar along the top or bottom of the screen. This guide covers adding the widget and setting up each skin.

Enable the Reading Progress Widget

Reading Progress is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Reading Progress. You can also open the Content category.

4. 4

   Turn the Reading Progress widget on.

5. 5

   Click Save Settings.

Add the Reading Progress Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Reading Progress. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

The indicator does not sit where you drop the widget. It is fixed to the screen, so it stays in its corner or along its edge while the page scrolls, and it measures the whole page. Drop the widget anywhere on a long page, such as at the end of the content, and add it once per page.

Choose a Skin

Open the widget and go to Content → Reading Progress. The Skin setting picks the indicator:

• Default — a ring in a corner of the screen with the percentage read in the middle.
• Back To Top — a ring with an up arrow that appears after the visitor scrolls a little. A click, or Enter or Space when it has keyboard focus, scrolls back to the top.
• Cursor — a ring that follows the mouse pointer. It is hidden on touch screens, which have no pointer.
• Horizontal Bar — a thin bar that grows across the top or bottom of the screen. While you are logged in it sits under the WordPress toolbar.

Settings

The other settings in the section change with the skin:

1. 1

   Position: Default and Back To Top: the corner, Bottom Right (the default), Bottom Left, Top Right or Top Left. Horizontal Bar: Top (the default) or Bottom.

2. 2

   Primary Circle Size: Default only: the size of the inner circle that holds the percentage, 40px by default (40px to 140px).

3. 3

   Secondary Circle Size: Every skin but Horizontal Bar: the size of the outer ring, 48px by default. For the Default skin, keep it a little larger than the Primary Circle Size so the ring shows around the inner circle.

4. 4

   Horizontal Offset: Default and Back To Top: moves the ring sideways, −150px to 150px. Positive values move it right.

5. 5

   Vertical Offset: Default and Back To Top: moves the ring away from the top or bottom edge, −150px to 150px.

6. 6

   Height: Horizontal Bar only: the bar's thickness, 3px when left empty.

All sizes and offsets can be set per screen size with the device icon.

Style the Reading Progress

The colors are on the Style tab, in the Additional section. What it shows depends on the skin:

• Active Background — every skin: the color of the progress, the filled part of the ring or bar.
• Background — Horizontal Bar: the track behind the bar, transparent by default. Back To Top: the button's background.
• Secondary Background and Border — Default: the inner circle's background and border.
• Text Color — Default: the percentage. Back To Top: the arrow.
• Box Shadow and Typography — Default and Back To Top: the ring's shadow and the percentage's font.