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.

Jose Varghese

<p>Improve your website’s user experience with <strong>Scroll to Top</strong>, a lightweight and feature-rich plugin that adds a smooth “Back to Top” button and a <strong>Reading Progress Bar</strong>.</p>
<p>Long pages can be frustrating. This plugin helps users navigate seamlessly with a single click. Unlike basic scroll plugins, we offer <strong>16 professionally designed styles</strong>, ranging from minimal arrows to gamified animations like Rocket Launch and Cosmic effects.</p>
<p>It also includes a visual <strong>Reading Progress Bar</strong>, perfect for blogs and long-form content to show readers their position on the page.</p>
<h3>🚀 Why Choose This Scroll to Top Plugin?</h3>
<p>Every website needs smooth navigation. Our plugin boosts user experience by allowing visitors to return to the top of your page instantly, reducing bounce rates and keeping them engaged. We prioritized performance, ensuring the plugin is lightweight and fast, loading assets only when necessary so your site speed remains unaffected. You can fully customize the extensive color options to match your brand identity, complete with live previews. Plus, it’s designed to be mobile-responsive, working perfectly on phones, tablets, and desktops.</p>
<ul>
<li><strong>Boost Navigation:</strong> Reduce bounce rates by making it easy to scroll back up.</li>
<li><strong>Lightweight & Fast:</strong> Optimized for performance; assets load only when needed.</li>
<li><strong>Fully Customizable:</strong> Match your brand with unlimited colors and live previews.</li>
<li><strong>Mobile Responsive:</strong> Designed to work perfectly on phones, tablets, and desktops.</li>
</ul>
<h3>✨ Key Features</h3>
<p>Unlock a suite of powerful features designed for modern websites. Choose from over 16 unique styles, ranging from minimalist designs to fun animations. The integrated Reading Progress Bar gives users a clear visual indicator of their position, while the smooth scroll technology ensures a polished feel. You have full control over positioning, scroll triggers, animation speed, and page targeting to ensure the button appears exactly when and where you need it.</p>
<ul>
<li><strong>16+ Unique Styles:</strong> Choose from minimalist arrows, rockets, bubbles, neon effects, and more.</li>
<li><strong>Reading Progress Bar:</strong> A sleek vertical bar that fills as users read down the page.</li>
<li><strong>Smooth Scroll Up:</strong> Customize the scroll speed (Slow, Normal, Fast) for a polished feel.</li>
<li><strong>Smart Positioning:</strong> Place the button Bottom-Right, Bottom-Left, or Bottom-Center.</li>
<li><strong>Scroll Trigger:</strong> Auto-show the button after scrolling a specific distance (e.g., 300px).</li>
<li><strong>Page Targeting:</strong> Display on specific post types (Homepage, Posts, Pages) or exclude as needed.</li>
<li><strong>Accessibility Ready:</strong> WCAG compliant with keyboard support and ARIA labels.</li>
</ul>
<h3>🎨 Styles Included</h3>
<p>We understand that every site has a unique design language. That’s why we’ve included a diverse library of button styles. Whether you need an essential arrow for a professional business site, a visual indicator for a blog, or a fun animation for a creative portfolio, you’ll find the perfect match. Our styles include everything from neon pulses and holographic effects to classic, minimal designs.</p>
<ul>
<li><strong>Essential:</strong> Classic Arrow, Minimal Glass, Floating Bubble.</li>
<li><strong>Visual Indicators:</strong> Progress Circle, Side Progress Bar.</li>
<li><strong>Fun Animations:</strong> Rocket Launch, Magic Wand, Floating Bubble.</li>
<li><strong>Modern Effects:</strong> Neon Pulse, Holographic, Cosmic Sparkle.</li>
</ul>
<h3>♿ Accessibility First</h3>
<p>Web accessibility is at the core of our development. We believe navigation should be seamless for everyone. The plugin is built with strict WCAG compliance, offering full keyboard navigation support (Tab key) and proper ARIA labels for screen readers. It also respects user preferences for reduced motion, ensuring a comfortable experience for all visitors.</p>
<ul>
<li><strong>Keyboard Support:</strong> Full keyboard navigation support (Tab key).</li>
<li><strong>Screen Readers:</strong> Proper ARIA labels for screen readers.</li>
<li><strong>Reduced Motion:</strong> Respects user “Reduced Motion” settings in browsers.</li>
</ul>
<p><strong>💡 Pro Tips:</strong><br />
* Use the progress circle style for long-form content<br />
* Match button colors to your brand palette<br />
* Enable the side progress bar for visual feedback<br />
* Adjust bottom offset to avoid conflicts with other fixed elements<br />
* Position buttons based on your site’s layout</p>


Scroll to Top – Smooth Scroll Up, Back to Top & Reading Progress Bar

Add a customizable Scroll to Top button and Reading Progress Bar. Smooth scroll up, 16+ styles, and mobile responsiveness for better navigation.

Reading Time & Progress Bar vs Scroll to Top – Smooth Scroll Up, Back to Top & Reading Progress Bar