Reading Progress Bar

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

By Iftakharul Islam

Version 2.0.0 Active Installs 0+ Updated 8 months ago 1 year old

Description

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.

Key Features:
– 🎨 Modern Dashboard: Beautiful, intuitive admin interface with live preview
– 🌈 Advanced Customization: Gradient colors, shadows, borders, and effects
– 📱 Responsive Design: Works perfectly on desktop, tablet, and mobile
– ⚡ Performance Optimized: Smooth animations and efficient code
– 🎯 Per-Post Control: Enable/disable for individual posts
– 📊 Reading Time: Display estimated reading time
– 🎪 Live Preview: See changes in real-time as you adjust settings

Features

Core Functionality

  • Reading Progress Tracking: Real-time progress bar that shows how much of the post has been read
  • Per-Post Control: Enable/disable progress bar for individual posts
  • Reading Time Estimation: Display estimated reading time for posts
  • Responsive Design: Works perfectly on desktop, tablet, and mobile devices

Advanced Customization

  • Color Options:
    • Solid color picker with WordPress native color picker
    • Gradient color support with start and end colors
    • Custom shadow colors and effects
    • Border color and width customization

Visual Effects

  • Position Control: Place progress bar at top or bottom of screen
  • Size Customization: Adjustable height (1-20px)
  • Border Radius: Rounded corners (0-50px)
  • Opacity Control: Adjust transparency (0.1-1.0)
  • Shadow Effects: Customizable shadow with color and blur options
  • Border Styling: Optional border with custom color and width

User Experience

  • Smooth Animations: Fluid progress updates with CSS transitions
  • Performance Optimized: Uses requestAnimationFrame for smooth scrolling
  • Keyboard Navigation: Space bar and arrow key support
  • Touch Gestures: Swipe support for mobile devices
  • Accessibility: High contrast mode and reduced motion support

Dashboard Features

  • Modern Admin Interface: Beautiful, responsive dashboard with tabs
  • Live Preview: See changes in real-time as you adjust settings
  • Statistics: View posts with progress bar enabled vs total posts
  • Organized Settings: Grouped options for easy configuration

Configuration

Basic Settings

  1. Navigate to Settings > Reading Progress Bar
  2. Configure appearance options:
    • Color: Choose solid color or enable gradient
    • Height: Set progress bar height (1-20px)
    • Position: Top or bottom of screen
    • Border Radius: Add rounded corners
    • Opacity: Adjust transparency

Advanced Effects

  • Shadow: Enable shadow with custom color and blur
  • Border: Add border with custom color and width
  • Gradient: Use gradient colors instead of solid color

Display Settings

  • Show on Posts: Enable/disable for blog posts
  • Show on Pages: Enable/disable for pages
  • Show Reading Time: Display estimated reading time

Per-Post Settings

  • Edit any post and look for the “Reading Progress Bar” meta box
  • Check/uncheck to enable/disable for that specific post

Requirements

  • WordPress 5.6 or higher
  • PHP 7.3 or higher
  • jQuery (included with WordPress)

License

This plugin is released under the GPL-2.0+ license. You can find a copy of the license in the license.txt file or visit http://www.gnu.org/licenses/gpl-2.0.txt for more information.

Support

For support, feature requests, or bug reports, please visit the plugin page or create an issue on GitHub.

Made with ❤️ for the WordPress community

Plugin comparisons

See how this plugin stacks up against alternatives side by side.