Look, you want a reading progress bar to keep users engaged and lower your bounce rate. But you absolutely refuse to install a heavy, outdated jQuery plugin that destroys your PageSpeed score. I built a purely lightweight, 5KB plugin that adds a beautiful top progress bar and styles your ugly default side scrollbar instantly.
Why Top Blogs Use a Reading Progress Bar
Open up massive tech blogs like HubSpot or Neil Patel. You will always see a thin colored line moving across the top of the screen as you scroll.
This is not just for decoration. It is a highly calculated psychological trigger.
Long articles intimidate readers. When a user sees a massive wall of text, they usually bounce immediately. A progress bar shows them exactly how much is left. It gamifies the reading experience and subconsciously pushes them to reach the finish line. This directly increases your time-on-page and signals to Google that your content is highly engaging.
The Problem With Heavy jQuery Plugins
I wanted this feature for my own sites years ago. So I searched the WordPress repository.
Every single progress bar plugin I found was absolute garbage. They were incredibly bloated. Developers were loading massive, outdated jQuery libraries just to animate a 5-pixel high div container.
Adding 100KB of render-blocking JavaScript for a tiny visual effect is an SEO death sentence today. Your Largest Contentful Paint (LCP) will tank. If you care about Core Web Vitals, you cannot afford to run those heavy, poorly coded plugins.
The Solution: My 5KB Scroll & Reading Bar Plugin
I got completely fed up with the bloat. So, I coded my own 2-in-1 solution from scratch. It is exactly 5KB in size.
You get a dead-simple backend panel where you can enable the top reading bar and define its exact height in pixels. No heavy settings panels. No upsell advertisements.
Just flip the toggle, set your brand’s specific gradient colors using the clean hex code inputs, and hit save. The entire thing runs on pure, modern CSS and microscopic vanilla JavaScript. Your site stays incredibly fast while looking like a million bucks.
The Animated “Rainbow Mode” Feature
Let me tell you about my absolute favorite feature in this plugin. I built a custom “Rainbow Mode” toggle directly into the top bar settings.
When you turn this on, the top progress bar constantly cycles through a smooth, animated spectrum of colors as the user scrolls. It instantly grabs the reader’s attention and adds a high-end visual pop to your layout. The best part? I coded this animation entirely in CSS, meaning it requires zero server resources.
Styling the Hidden Eyesore: Your Side Scrollbar
Most developers completely ignore the default browser scrollbar on the right side of the screen. It is usually a chunky, ugly gray block. Honestly, it ruins your custom theme aesthetics.
I fixed that problem too. You can enable the custom scrollbar option and apply a two-color gradient to match your site’s exact branding. It strips away the ugly default browser styling and replaces it with a sleek, modern scrollbar. This tiny detail instantly elevates your website from a basic blog to a premium digital platform.
Reading Progress & Custom Scrollbar Plugin
Technical SEO & WordPress FAQs
Q1. Does a reading progress bar improve SEO?
Yes, indirectly. Google heavily monitors user engagement signals. Because a progress bar subconsciously encourages users to keep scrolling, it increases their “Time on Page” and lowers your overall Bounce Rate. These are massive positive signals for search engine algorithms.
Q2. Will this 5KB plugin slow down my mobile site?
Absolutely not. Unlike bloated marketplace plugins, there is zero jQuery involved. It relies on pure CSS and a microscopic vanilla JavaScript snippet that fires instantly without blocking your mobile rendering path.
Q3. Can I change the scrollbar color to match my brand?
Yes. You do not need to write any custom CSS to do this. The plugin has a dead-simple backend settings panel where you can pick two gradient colors (using standard hex codes) for both the reading bar and the side scrollbar.
Q4. Does it work on GeneratePress and custom themes?
Yes. I built it specifically for minimalist themes like GeneratePress, but it is 100% theme-agnostic. It will work flawlessly on Astra, Kadence, Divi, or any custom Gutenberg block theme you are running.
Q5. Is Rainbow mode CSS-based or JavaScript-heavy?
It is 100% CSS-based. I refused to use heavy JavaScript intervals to animate the colors because that causes browser lag. The Rainbow animation uses pure CSS keyframes, making it buttery smooth and incredibly lightweight.
Leave a Feedback