1. No-Code Solution
- Download and activate the Reading progressbar plugin by Jb Audras.
- Navigate to the WordPress admin dashboard > Settings > Reading progressbar settings.
- Style the progress bar with the fields available.
- Make sure to check both the post type(s) and specific pages or categories where you want your new progress bar to appear!
2. Plugin-Free Solution
- Navigate to the page where you would like to insert your progress bar. This could be on a single page or a template used on multiple pages.
- Add a Custom HTML widget. (It doesn’t matter if your website uses the Gutenberg editor, Elementor, or another website builder.)
- Copy and paste the following code in your widget.
- Stylize your progress bar.
<style>:root {
--track-color: #e5e5e5; /* ← CHANGE BAR BACKGROUND COLOR */
--progress-color: red; /* ← CHANGE BAR PROGRESS COLOR */
}
#reading-progress-track {
position: fixed;
left: 0;
width: 100%;
height: 20px; /* ← CHANGE BAR HEIGHT HERE */
background-color: var(--track-color);
z-index: 999998;
pointer-events: none;
}
#reading-progress-bar {
height: 100%;
width: 0%;
background: var(--progress-color);
background-size: 100vw 100%; /* ← KEY LINE */
background-position: left center;
transition: width 0.1s linear;
}
#reading-progress-track {
top: 0; /* ← CHANGE TO bottom: 0 FOR BOTTOM BAR */
}</style>
<!-- Background track -->
<div id="reading-progress-track">
<div id="reading-progress-bar"></div>
</div>
<script>
window.addEventListener('load', function () {
var enableOnPages = [];
if (enableOnPages.length) {
var bodyClasses = document.body.className;
var enabled = enableOnPages.some(function (c) {
return bodyClasses.indexOf(c) !== -1;
});
if (!enabled) return;
}
var bar = document.getElementById('reading-progress-bar');
var track = document.getElementById('reading-progress-track');
if (!bar || !track) return;
function updateProgress() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var docHeight =
document.documentElement.scrollHeight - window.innerHeight;
var progress = docHeight > 0
? (scrollTop / docHeight) * 100
: 100;
bar.style.width = progress + '%';
}
window.addEventListener('scroll', updateProgress);
window.addEventListener('resize', updateProgress);
updateProgress();
});
</script>
Notes
Both of these options work great, but in my experience the plugin-free approach loads a bit faster and gives you more flexibility—which is why it’s the one I prefer. It keeps things lightweight, avoids adding another dependency to your site, and it makes it possible to add gradient coloring. That is important to me and my brand, but in most cases a solid color will work perfect too!
A reading progress bar is a small enhancement, but when it’s used intentionally, it can help your website stand out from competitors and noticeably improve engagement on longer pages. Remember to keep the bar subtle, test it on mobile, and make sure it supports the reading experience rather than pulling attention away from the content.
