Aman Joshi

<p>Reading Time and Progress Bar is a WordPress plugin designed to enhance reader engagement and provide a better user experience on blogs. It automatically calculates the estimated reading time for each post and displays a progress bar at the top of the page, which fills as the reader scrolls through the content.</p>
<p>This plugin is easy to set up and compatible with any WordPress theme, ensuring that all users can benefit from its features without any coding knowledge required.</p>
<h3>Arbitrary section</h3>
<p>You can extend the functionality of this plugin by adding custom CSS to style the progress bar and adjust the reading time calculation per your preferences.</p>
<h3>A brief Markdown Example</h3>
<p>Ordered list:<br />
1. Some feature<br />
2. Another feature<br />
3. Yet another feature</p>
<p>Code block:<br />
function example_function() {<br />
return ‘This is a code block’;<br />
}</p>
<p>For more information and support, visit <a href="https://aimactgrow.com/" rel="nofollow ugc">our website</a>.</p>


Reading Time and Progress Bar


This plugin is very simple and works effectively for my blog website.


Simple yet effective

A simple WordPress plugin that displays the estimated reading time and a progress bar at the top of your blog posts as readers scroll through.

Mohammad Sajid Ansari

<p><strong>Idara Reading Time</strong> is a focused, single-purpose Gutenberg block that does one thing well: shows readers how long your post will take. It also offers an optional scroll progress bar — a thin bar pinned to the top or bottom of the page that fills as the visitor scrolls.</p>
<p><em>Idara (إدارة) is an Arabic word meaning “studio” or “administration” — the brand behind a growing family of carefully crafted, single-purpose Gutenberg blocks.</em></p>
<h4>Why this and not a full block suite?</h4>
<p>Most block plugins ship 30+ blocks you’ll never use, slowing your editor and your frontend. Idara plugins are deliberately small. This one is under 25 KB. CSS and JS load <strong>only on pages where the block is present</strong> — never globally.</p>
<h4>Features</h4>
<ul>
<li>Estimated reading time, calculated server-side from your post content</li>
<li>Display as a single value (“3 min read”) or a friendly range (“2–3 min read”)</li>
<li>Adjustable words-per-minute (50–600)</li>
<li>4 icon styles: clock, timer, hourglass, or none</li>
<li>Optional scroll progress bar with color, height, and position (top/bottom)</li>
<li>Hide on short posts (e.g. don’t show on anything under 2 minutes)</li>
<li>Custom prefix and suffix text</li>
<li>Inherits theme typography and text color via block supports</li>
<li>Full Site Editing (FSE) compatible — works inside block templates and template parts</li>
<li>Block toolbar shortcuts for icon cycling and range toggle</li>
<li>Semantic, accessible markup with ARIA labels</li>
<li>No tracking, no external requests, no third-party services</li>
<li>Translation-ready</li>
</ul>
<h4>Use cases</h4>
<ul>
<li>Blog posts where readers want to gauge time investment</li>
<li>Long-form articles where the scroll progress bar improves engagement</li>
<li>Documentation sites</li>
<li>News and magazine layouts</li>
</ul>
<h3>Development</h3>
<p>Source code and build tools are available on GitHub:<br />
https://github.com/sajid-ansari-65/idara-reading-time</p>
<p>The <code>src/</code> directory contains the unminified JavaScript (ES modules, JSX) and SCSS. Run <code>npm install && npm run build</code> to compile.</p>


Idara Reading Time

Show estimated reading time with an optional scroll progress bar. A lightweight, FSE-ready Gutenberg block that loads only where used.

Reading Time and Progress Bar vs Idara Reading Time