Code Canel

<p>Do you find that potential readers frequently bypass your posts due to concerns about the time investment? Are you inadvertently losing valuable readership as a result?</p>
<p>The Reading Time & Progress Bar plugin effortlessly showcases the estimated reading duration for blog articles, coupled with an engaging progress bar. This feature not only provides visitors with a swift understanding of the time commitment required for reading a post but also serves as a motivating factor to encourage them to read through to the conclusion.</p>
<p>Typically, visitors initially attempt to scan an entire post, aiming to glean as much information as possible at a glance. By specifying the reading time in minutes, this approach not only engages users but also serves as a powerful motivator to encourage them to delve into the post’s content.</p>
<p>Enhance the reader’s experience with a user-friendly progress bar that elegantly tracks their position within the post. As readers scroll through the content, this sleek progress bar provides real-time feedback, visually illustrating the remaining portion of the post. This intuitive feature not only informs readers of their progress but also guides them effortlessly through the article, offering a clear sense of how far they’ve come and how much more lies ahead.</p>
<p>This plugin employs a cutting-edge image time calculation method to enhance your content. If your post includes images, the plugin seamlessly calculates the time required to view these visuals. You have the flexibility to customize this experience by setting the desired pace, specifying the number of images per minute, ensuring a tailored and engaging reading journey for your audience.</p>
<h3>Key Features:</h3>
<ol>
<li>Easy-to-use and intuitive interface</li>
<li>Customize freedomly</li>
<li>Responsive and mobile-friendly design</li>
<li>Lightweight and optimized for fast loading</li>
<li>Cross-browser compatible</li>
</ol>
<h3>Features:</h3>
<h4>General Features</h4>
<ul>
<li>Post Types</li>
<li>Word Per Minute</li>
<li>Include Comments</li>
<li>Include Images</li>
<li>Images Per Minute</li>
<li>Reading Time Text : Singular</li>
<li>Reading Time Text: Plural</li>
<li>Export & Import</li>
</ul>
<h4>Reading Time Features</h4>
<ul>
<li>Display on</li>
<li>Text Position</li>
<li>Text Prefix</li>
<li>Text Suffix</li>
<li>Typography</li>
<li>Text Color</li>
<li>Background Color</li>
<li>Custom CSS</li>
<li>Preview</li>
</ul>
<h4>Reading Progress Bar Features</h4>
<ul>
<li>Display Position / Template</li>
<li>Height</li>
<li>Style (Preset Template)</li>
<li>Offset</li>
<li>Content Offset</li>
<li>RTL Support</li>
<li>Background Opacity</li>
<li>Foreground Opacity</li>
<li>Border Radius</li>
<li>Foreground Color</li>
<li>Background Color</li>
<li>Custom CSS</li>
<li>Preview</li>
</ul>
<h3>License</h3>
<p>This plugin is licensed under the GPL-2.0-or-later: GNU General Public License v2.0</p>
<h3>Contribute</h3>
<p>The full source code is available on <a href="https://github.com/codecanel/reading-time-progress-bar" rel="nofollow ugc">GitHub Repository</a>. Feel free to contribute or report an issue.</p>


Reading Time & Progress Bar

The Reading Time & Progress Bar plugin enhances your blog with an estimated reading time and a stylish progress bar.

Iftakharul Islam

<p>The Reading Progress Bar plugin adds a beautiful, customizable progress bar to your blog posts, allowing readers to see how much they have scrolled through the content. This feature helps to enhance the reading experience and provides a visual indication of the user’s progress.</p>
<p><strong>Key Features:</strong><br />
– 🎨 <strong>Modern Dashboard</strong>: Beautiful, intuitive admin interface with live preview<br />
– 🌈 <strong>Advanced Customization</strong>: Gradient colors, shadows, borders, and effects<br />
– 📱 <strong>Responsive Design</strong>: Works perfectly on desktop, tablet, and mobile<br />
– ⚡ <strong>Performance Optimized</strong>: Smooth animations and efficient code<br />
– 🎯 <strong>Per-Post Control</strong>: Enable/disable for individual posts<br />
– 📊 <strong>Reading Time</strong>: Display estimated reading time<br />
– 🎪 <strong>Live Preview</strong>: See changes in real-time as you adjust settings</p>
<h3>Features</h3>
<h3>Core Functionality</h3>
<ul>
<li><strong>Reading Progress Tracking</strong>: Real-time progress bar that shows how much of the post has been read</li>
<li><strong>Per-Post Control</strong>: Enable/disable progress bar for individual posts</li>
<li><strong>Reading Time Estimation</strong>: Display estimated reading time for posts</li>
<li><strong>Responsive Design</strong>: Works perfectly on desktop, tablet, and mobile devices</li>
</ul>
<h3>Advanced Customization</h3>
<ul>
<li><strong>Color Options</strong>:
<ul>
<li>Solid color picker with WordPress native color picker</li>
<li>Gradient color support with start and end colors</li>
<li>Custom shadow colors and effects</li>
<li>Border color and width customization</li>
</ul>
</li>
</ul>
<h3>Visual Effects</h3>
<ul>
<li><strong>Position Control</strong>: Place progress bar at top or bottom of screen</li>
<li><strong>Size Customization</strong>: Adjustable height (1-20px)</li>
<li><strong>Border Radius</strong>: Rounded corners (0-50px)</li>
<li><strong>Opacity Control</strong>: Adjust transparency (0.1-1.0)</li>
<li><strong>Shadow Effects</strong>: Customizable shadow with color and blur options</li>
<li><strong>Border Styling</strong>: Optional border with custom color and width</li>
</ul>
<h3>User Experience</h3>
<ul>
<li><strong>Smooth Animations</strong>: Fluid progress updates with CSS transitions</li>
<li><strong>Performance Optimized</strong>: Uses requestAnimationFrame for smooth scrolling</li>
<li><strong>Keyboard Navigation</strong>: Space bar and arrow key support</li>
<li><strong>Touch Gestures</strong>: Swipe support for mobile devices</li>
<li><strong>Accessibility</strong>: High contrast mode and reduced motion support</li>
</ul>
<h3>Dashboard Features</h3>
<ul>
<li><strong>Modern Admin Interface</strong>: Beautiful, responsive dashboard with tabs</li>
<li><strong>Live Preview</strong>: See changes in real-time as you adjust settings</li>
<li><strong>Statistics</strong>: View posts with progress bar enabled vs total posts</li>
<li><strong>Organized Settings</strong>: Grouped options for easy configuration</li>
</ul>
<h3>Configuration</h3>
<h3>Basic Settings</h3>
<ol>
<li>Navigate to <strong>Settings > Reading Progress Bar</strong></li>
<li>Configure appearance options:
<ul>
<li><strong>Color</strong>: Choose solid color or enable gradient</li>
<li><strong>Height</strong>: Set progress bar height (1-20px)</li>
<li><strong>Position</strong>: Top or bottom of screen</li>
<li><strong>Border Radius</strong>: Add rounded corners</li>
<li><strong>Opacity</strong>: Adjust transparency</li>
</ul>
</li>
</ol>
<h3>Advanced Effects</h3>
<ul>
<li><strong>Shadow</strong>: Enable shadow with custom color and blur</li>
<li><strong>Border</strong>: Add border with custom color and width</li>
<li><strong>Gradient</strong>: Use gradient colors instead of solid color</li>
</ul>
<h3>Display Settings</h3>
<ul>
<li><strong>Show on Posts</strong>: Enable/disable for blog posts</li>
<li><strong>Show on Pages</strong>: Enable/disable for pages</li>
<li><strong>Show Reading Time</strong>: Display estimated reading time</li>
</ul>
<h3>Per-Post Settings</h3>
<ul>
<li>Edit any post and look for the “Reading Progress Bar” meta box</li>
<li>Check/uncheck to enable/disable for that specific post</li>
</ul>
<h3>Requirements</h3>
<ul>
<li>WordPress 5.6 or higher</li>
<li>PHP 7.3 or higher</li>
<li>jQuery (included with WordPress)</li>
</ul>
<h3>License</h3>
<p>This plugin is released under the GPL-2.0+ license. You can find a copy of the license in the <code>license.txt</code> file or visit <a href="http://www.gnu.org/licenses/gpl-2.0.txt" rel="nofollow ugc">http://www.gnu.org/licenses/gpl-2.0.txt</a> for more information.</p>
<h3>Support</h3>
<p>For support, feature requests, or bug reports, please visit the <a href="https://ifatwp.wordpress.com/2023/10/17/blog-reading-progress/" rel="nofollow ugc">plugin page</a> or create an issue on GitHub.</p>
<p><strong>Made with ❤️ for the WordPress community</strong></p>


Reading Progress Bar

A modern WordPress plugin that adds a customizable reading progress bar to your blog posts with advanced styling options.

Reading Time & Progress Bar vs Reading Progress Bar