ibrahimhalefoglu

ReadSpan adds two lightweight engagement features to your WordPress site:
Reading Time Badge 
A pill-shaped badge that displays estimated reading time, injected before, after, or both sides of post content. Supports three SVG icons (clock, book, stopwatch), custom colors, shapes, padding, and font size. Works via shortcode too.
Scroll Progress Bar 
A fixed-position progress bar (top or bottom of the viewport) that fills as the reader scrolls. Supports solid color, gradient, configurable height, and a real-time countdown feature in the badge.
Highlights
<ul>
<li>Zero JavaScript dependencies — vanilla JS, passive scroll listener with requestAnimationFrame throttle</li>
<li>CSS custom properties for instant style updates</li>
<li>24 configurable settings via a clean 3-tab admin UI with live preview</li>
<li>Mobile hide option (below 768 px)</li>
<li>Dark mode admin UI (prefers-color-scheme: dark)</li>
<li>Shortcode <code>[readspan]</code> support</li>
<li>PHP 7.4 compatible, no Composer required on production</li>
<li>Follows WordPress Coding Standards and DDD architecture</li>
</ul>

ReadSpan — Customizable Reading Time Badge & Progress Bar

Show a reading time badge and a scroll progress bar on your posts and pages — fully customizable from the admin panel.

Anowar Hossain Rana

Dynamic progress bar that shows the reading progress of posts and pages. 
Reading Progress Bar enhances user engagement by adding a sleek progress bar at the top of your browser window as readers scroll through your content. This visual indicator not only improves user experience by showing how much content remains but also encourages visitors to continue reading. The progress bar can be easily customized to fit your site’s design through the plugin settings, allowing you to change its color with just a few clicks.
Features:
<ul>
<li>Dynamic progress bar that shows the reading progress of posts and pages.</li>
<li>Simple color customization options to match your website’s theme.</li>
<li>Lightweight and fast-loading, ensuring it doesn’t slow down your site.</li>
<li>Compatible with most WordPress themes and devices.</li>
</ul>
<h3>Acknowledgements</h3>
Thank you to the WordPress community and all contributors who help make this ecosystem amazing.
<h3>Contact</h3>
For support or inquiries, please reach out to <a href="mailto:cxranabd@gmail.com" rel="nofollow ugc">Learn With Rana</a>.
<h3>Plugin Homepage</h3>
For more information, visit the <a href="https://cxrana.wordpress.com/2024/08/11/wordpress-reading-progress-bar/" rel="nofollow ugc">plugin’s homepage</a>.

Reading Progress Bar

The Reading Progress Bar adds a stylish top-bar that shows reading progress, enhancing user experience on your pages and posts.

ReadSpan — Customizable Reading Time Badge & Progress Bar vs Reading Progress Bar