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
- Download the plugin ZIP from your dashboard
- Upload to WordPress (Plugins → Add New → Upload)
- Activate plugin
- Configure settings (Settings → Progress Bar)
- Visit any blog post and scroll to see the progress bar!
Installation
Step 1
Download Plugin
- Download from your dashboard
- Do not extract the ZIP file - WordPress needs it in ZIP format
Step 2
Upload & Activate
- Go to Plugins → Add New
- Click Upload Plugin
- Choose the ZIP file and click Install Now
- 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?