Sky Addons for Elementor

⌘K
  2. Home
  4. Sky Addons for Elementor
  6. Widgets
  8. Reading Progress

Reading Progress

How to use Reading Progress Widget of Sky Addons for Elementor

The Reading Progress widget for Elementor by Sky Addons shows visitors how far they’ve read on the page — a small touch that noticeably improves engagement on long articles. It ships with five skins: the Default top/bottom progress bar, Fancy Horizontal and Fancy Vertical bars with a live percentage readout, a circular Scroll Top button that fills as you scroll and jumps back to the top on click, and a playful With Cursor skin that wraps the progress ring around the mouse cursor. This documentation will guide you through the process of using the Reading Progress widget to add a polished scroll indicator to your website.

Features:

  1. Five Skins: Default bar, Fancy Horizontal, Fancy Vertical, Scroll Top button, and With Cursor.
  2. Live Percentage: Fancy skins can display the exact reading percentage as you scroll.
  3. Scroll-to-Top Button: Circular progress button with four corner positions, visibility threshold, and animated scroll back to top.
  4. Cursor Progress Ring: A dot-and-ring cursor follower that doubles as the progress indicator, with blend modes.
  5. Flexible Placement: Top or bottom bar, left or right vertical bar, plus pixel-perfect offset controls.
  6. Smooth Animation: Adjustable animation speed for buttery progress updates.

Insert Reading Progress Widget

  1. Open Elementor Editor. In the Elementor panel, search for “Reading Progress” under Sky Addons.
  2. Drag and Drop the Widget anywhere on the page — the indicator itself is positioned fixed on screen, so the widget’s location in the layout doesn’t matter visually.

Choose a Skin

The Skin option at the top of the Content tab switches the whole indicator design:

  1. Default: A slim progress bar fixed to the Top or Bottom edge of the viewport.
  2. Fancy Horizontal: A horizontal bar with an optional live percentage readout.
  3. Fancy Vertical: A vertical bar on the Left or Right side with adjustable spacing from the edge and the same percentage option.
  4. Scroll Top: A circular button in any of the four screen corners that fills with progress and scrolls the page back to the top when clicked.
  5. With Cursor: Progress rings that follow the mouse cursor, with a configurable center dot.

Configure Settings

Available options change with the selected skin:

  1. Size: The bar thickness (1–20px).
  2. Select Position: Top/Bottom for the Default bar; Left/Right (plus edge Spacing) for Fancy Vertical; Right Top / Right Bottom / Left Top / Left Bottom for Scroll Top.
  3. Show Percentage: Toggle the live percentage readout on the Fancy skins.
  4. Show After (px): Scroll distance before the Scroll Top button becomes visible (default 50).
  5. Scroll Animation (ms): Duration of the scroll-to-top animation (default 550).
  6. Offset: Optional popover with responsive Horizontal and Vertical offsets (−100 to 100px) to nudge the indicator’s exact position.
  7. Animation Speed (ms): How smoothly the progress value animates (default 200).
  8. With Cursor options: Dot Size (2–30px), Ring Follow Lag (ms) — how far the rings trail behind the cursor (0 = instant) — and Ring Thickness (1–8px).

Style Your Reading Progress

  1. Reading Progress:
    Set the main progress Color and the track’s Base Color. The Scroll Top skin adds Icon Color and Icon Size; the With Cursor skin adds Dot Color, Ring Color, and a Blend Mode (Normal, Difference, Exclusion, Multiply, Screen, Overlay) so the cursor stays visible over any background.
  2. Percentage:
    For the Fancy skins — the Value Color, Percentage (%) Color, and full Typography of the readout.

Save and Preview

  1. Once you’ve customized and styled your reading progress indicator, click “Publish” or “Update” to save your changes.
  2. Preview the page and scroll to confirm the indicator fills correctly from top to bottom.

Best Practices

  1. Consistency: Use your brand’s accent color as the progress color so the indicator feels native to the site.
  2. Accessibility: Keep good contrast between the progress color and the base/track color.
  3. One indicator per page: Multiple progress widgets on the same page compete visually — pick one skin.
  4. Testing: The With Cursor skin relies on a mouse — verify your page still communicates progress for touch visitors, or prefer a bar skin for mobile-heavy audiences.

Troubleshooting

  1. Bar not visible: It may be hidden behind a fixed header — use the Offset popover or pick the Bottom position, and check z-index conflicts with other fixed elements.
  2. Scroll Top button never appears: It only shows after the Show After (px) scroll distance — lower the threshold or scroll further.
  3. Progress jumps instead of gliding: Increase Animation Speed (ms) for a smoother transition between values.

Frequently Asked Questions

How do I add a reading progress bar to my WordPress site with Elementor?

Drop the Reading Progress widget by Sky Addons anywhere on the page (a footer template works great for site-wide use), pick a skin, and set the size and colors. The bar is fixed to the viewport and fills as the visitor scrolls.

Can the widget show the reading percentage as a number?

Yes. Choose the Fancy Horizontal or Fancy Vertical skin and enable Show Percentage. You can style the value and the % sign separately, including typography, in the Percentage style section.

How do I add a scroll-to-top button with progress?

Select the Scroll Top skin. A circular button appears in your chosen corner once the visitor scrolls past the Show After threshold, fills with reading progress, and smoothly scrolls back to the top when clicked — with an adjustable animation duration.

What does the With Cursor skin do?

It replaces the static bar with a dot and progress ring that follow the mouse cursor. You control the dot size, ring thickness, follow lag, colors, and a blend mode so the cursor indicator stays visible over both light and dark content.

Can I move the progress bar to the bottom or the side of the screen?

Yes. The Default skin offers Top or Bottom placement; the Fancy Vertical skin pins the bar to the Left or Right edge with adjustable spacing; and the Offset popover gives fine horizontal/vertical nudging per device.

Related Documentation

Conclusion

The Reading Progress Widget by Sky Addons for Elementor gives readers a constant sense of place on the page — from a minimal bar to a cursor-borne progress ring — all without code. For further assistance, consult the Sky Addons support team or community forums. Enjoy keeping your readers engaged!

How can we help?