Progress Bar Plugin

Visual scroll progress indicator for your posts

WordPress 5.0+ PHP 7.4+ Version 1.0.0 Performance Optimized

Quick Start (2 Minutes)

Get up and running fast

  1. Download the plugin ZIP from GitHub releases
  2. Upload to WordPress (Plugins → Add New → Upload)
  3. Activate plugin
  4. Configure settings (Settings → Progress Bar)
  5. Visit any blog post and scroll to see the progress bar!

Installation

Step 1

Download Plugin

  • Download the latest ZIP from GitHub releases
  • Do not extract the ZIP file - WordPress needs it in ZIP format
Step 2

Upload & Activate

  1. Go to Plugins → Add New
  2. Click Upload Plugin
  3. Choose the ZIP file and click Install Now
  4. Click Activate Plugin
Step 3

Configure Settings

Go to Settings → Progress Bar and configure:

  • Position:
    • Top of Page (default) - Fixed at viewport top
    • Bottom of Page - Fixed at viewport bottom
  • Height: 2-10 pixels (default: 3px)
  • Progress Color: Default #0073aa (WordPress blue)
  • Background Color: Default #e0e0e0 (Light gray)
  • Smooth Animation: Enabled by default for fluid scrolling
  • Display On: Posts, pages, archives
  • Z-Index: Control layering (default: 9999)

Features

Position Toggle

Choose top or bottom placement to match your theme design

Customizable Colors

Full color picker for progress bar and background to match your brand

Height Adjustment

Range from 2-10px for subtle or bold visual presence

Smooth Animation

60fps performance with requestAnimationFrame optimization

Archive Support

Display on archive pages, category listings, and search results

Post Type Filtering

Enable on posts, pages, or custom post types

Theme Compatibility

Tested and verified to work with popular themes:

Twenty Twenty-Four
WordPress default theme
Astra
3M+ active installs
Hello Elementor
3M+ active installs
GeneratePress
Performance-focused
OceanWP
800K+ active installs

Note: Automatically adjusts for WordPress admin bar on desktop (32px offset) and mobile (46px offset).

Troubleshooting

Progress Bar Not Visible
  • Verify plugin is activated (Plugins page)
  • Check post type is enabled in Settings → Progress Bar
  • Try increasing Z-Index value (e.g., 99999) if theme has custom fixed elements
  • Clear site and browser cache
Bar Appearing in Wrong Position
  • Some themes have custom positioning - adjust Z-Index in settings
  • Check if WordPress admin bar is affecting position (automatic offset)
  • Try toggling between Top and Bottom position settings
  • Contact support if issues persist
Scrolling Feels Laggy
  • Disable "Smooth Animation" in Settings → Progress Bar
  • This can improve performance on older devices or very long posts (5000+ words)
  • The plugin uses requestAnimationFrame for 60fps performance by default

Frequently Asked Questions

Can I customize the colors and appearance?
Yes! Full customization available in Settings → Progress Bar. You can customize progress color, background color, height (2-10px), position (top/bottom), and z-index layering.
Will it slow down my site?
No! The plugin is highly optimized with less than 2KB of JavaScript. It uses requestAnimationFrame for smooth 60fps performance and throttled scroll events. All 5 tested themes maintain excellent performance.
Does it work on archive pages?
Yes! You can enable the progress bar on archive pages, category listings, and search results in Settings → Progress Bar.
Does it work with page builders?
Yes! Works seamlessly with Elementor, Gutenberg, and Classic Editor. The plugin uses standard WordPress hooks and is compatible with all major page builders.

Need Help?

These plugins are lightly maintained: I keep them current with new WordPress releases and popular themes, and revisit them a few times a year. There is no support inbox — the source is on GitHub if you want to dig in or fork them.

Links: