Make Your Site Look Professional: My Free Custom Scroll & Reading Bar Plugin

I’m a massive advocate for fast, lightweight themes like GeneratePress, Astra, and Kadence. Why? They’re built for performance. They give you a rock-solid foundation without loading a single byte of code you don’t need.

But that commitment to minimalism leaves you with a “boring” problem.

Your site looks… default. You’ve got that ugly, 1990s-era grey browser scrollbar. And when a user is 800 words into a 3,000-word post, they have no idea how close they are to the end.

What’s the typical “fix”? You go to the repository and install some bloated “UX Enhancement” plugin. And just like that, you’ve traded your 100-point performance score for a 7-color scrollbar. You’ve added 500KB of JavaScript “junk” and a dozen database tables just to change a color.

That’s not a solution. That’s bloat.

I got tired of this compromise. So, I built a 2-in-1 solution: the PSB Scroll and Reading Bar plugin.

And here’s the most important part: the entire plugin is just 6KB.

That’s not a typo. It’s smaller than a favicon. It’s the definition of my “lightweight” philosophy. It gives you a professional, “custom-built” look without the performance penalty.

The “2-in-1” Professional UX Upgrade

I’ve packed two essential, high-impact features into this tiny 6KB file. You can use either one, or both together.

1. The Reading Progress Bar: A Psychological Nudge

First, this plugin adds a thin, fixed bar to the very top of your page. As a user scrolls down, this bar fills up, showing them exactly how far they are from finishing the article.

This isn’t just a “nice-to-have” visual. It’s a proven psychological tool.

It answers the user’s subconscious question: “How much more of this is left?” By giving them a clear “finish line,” you motivate them to keep reading. This is a simple, powerful way to boost engagement and increase your “time on page.”

And of course, I’ve given you full control. In the settings, you can set the exact Bar Height in pixels (e.g., 6px) to match your design. You can also set a Custom Gradient using any two colors, like your brand’s blue and purple.

Or, for a really high-end look, I’ve included an Animated Rainbow Mode. I’m usually against animations, but this one is built with pure, hyper-efficient CSS. It’s a gorgeous, shimmering 7-color effect with almost zero performance cost.

2. The Custom Scrollbar: Branding the “Forgotten” Detail

Next, this plugin replaces that boring default grey scrollbar with a custom-branded one.

This is a small detail, but in branding, the details are what separate a professional-looking site from an amateur one. It makes your site’s design feel complete and polished.

In the settings, you can set any two-color Custom Gradient (top-to-bottom) for the scrollbar “thumb” (the part that moves). This means that even the edge of the browser window can match your brand’s aesthetic.

And as a 15-year developer, I’ve built this the right way. It’s 100% cross-browser compatible. It works perfectly on Chrome, Edge, and Safari. And for Firefox, which (frustratingly) doesn’t support a gradient on the scrollbar, I’ve coded in a clean, single-color fallback. Your site looks professional and consistent, everywhere.

The ProSeoBlogger Difference (Why This 6KB Plugin is Safe)

So why is this free 6KB plugin better than a “premium” one you’d pay $50 for?

It’s 6KB. That’s a Philosophy, Not a Typo.

I built this to be the ultimate “anti-bloat” tool. It doesn’t have 20 settings panels. It doesn’t have a “marketing” menu. It doesn’t load a single line of jQuery. It is a single, hyper-optimized JavaScript and CSS file, intelligently loaded only when needed. It adds zero database tables. It has no impact on your site’s speed.

It’s 100% Theme Independent.

I didn’t tie this to GeneratePress or Astra. I built it to be universal. It hooks into your site’s body, completely independent of your theme’s files or colors. This means you can change your theme tomorrow, and this plugin will still work without you touching a single setting.

It’s Zero-Conflict, “Hackproof” Code.

This is the “Tech Architect” guarantee. I build my code to be isolated. All my functions are prefixed. All my code is wrapped to ensure it cannot conflict with your other plugins. You can install this with confidence, knowing it’s secure, stable, and won’t be the reason you see the “White Screen of Death.”

How to Install It (The 30-Second Setup)

This is a custom-coded plugin, so you won’t find it in the public repository (that’s how I keep it free of repository-required bloat).

1. Download the plugin zip file from the download box below.
2. In your WordPress dashboard, go to Plugins > Add New.
3. At the top of the page, click the “Upload Plugin” button.
4. Choose the .zip file you just downloaded and click “Install Now.”
5. Activate Plugin.
6. Navigate to Settings > PSB Scroll Bar to configure your colors.

Pro Tip: If you activate the plugin and don’t see the changes, clear your website’s cache once. Your caching plugin (like WP Rocket, Litespeed, etc.) is just serving the old, un-styled version of your site.

Stop Compromising. Get the Upgrade.

You shouldn’t have to choose between a fast site and a professional-looking one. You can, and should, have both.

This is a free tool I’m giving to all my readers. It’s the perfect example of my philosophy: a simple, lightweight, and powerful solution to a common problem.