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.
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
- Zero JavaScript dependencies — vanilla JS, passive scroll listener with requestAnimationFrame throttle
- CSS custom properties for instant style updates
- 24 configurable settings via a clean 3-tab admin UI with live preview
- Mobile hide option (below 768 px)
- Dark mode admin UI (prefers-color-scheme: dark)
- Shortcode
[readspan]support - PHP 7.4 compatible, no Composer required on production
- Follows WordPress Coding Standards and DDD architecture