Experience the powerful AI writing right inside WordPress
Show stunning before-and-after transformations with image sliders.
Improve user engagement by showing estimated reading time.
Written by Mahmuda Akter Isha
Showcase Designs Using Before After Slider.
When visitors land on a long blog post, tutorial, documentation page, or landing page, they often wonder one simple thing: how much more content is left?
That is where Scroll Progress UI becomes useful.
A scroll progress UI gives users a clear visual indicator of how far they have moved through a page. It can appear as a thin progress bar at the top of the screen, a circular progress indicator, a side progress line, or even a percentage-based scroll indicator.
For content-heavy websites, this small UI element can make a big difference. It helps readers understand their progress, encourages them to continue reading, and improves the overall browsing experience.
In this complete guide, you will learn what Scroll Progress UI is, why it matters, different types of scroll progress indicators, and how to add a reading progress bar to your website using WordPress, CSS, JavaScript, React, Next.js, and plugins.
Scroll Progress UI is a visual interface element that shows how much of a webpage a user has already scrolled and how much content remains.
It is commonly used on:
The most common version is a scroll progress bar fixed at the top of the page. As the user scrolls down, the bar fills from left to right. When the user reaches the end of the page, the bar reaches 100%.
In simple words, Scroll Progress UI helps visitors answer this question:
“How far am I through this page?”
A scroll progress bar is a visual indicator that shows the user’s reading or scrolling progress on a webpage.
It usually appears as a thin horizontal bar at the top or bottom of the screen. As users scroll down, the bar gradually fills based on the percentage of the page they have viewed.
For example:
A scroll progress bar is also called:
Although these terms are slightly different, they often refer to the same core idea: showing users their progress while scrolling.
Many people use these terms interchangeably, but there are small differences.
Scroll Progress UI is the broader design concept. It includes any visual element that shows scrolling progress on a page.
Examples include:
A reading progress bar is a specific type of scroll progress UI mostly used for blog posts, articles, and long-form content.
It helps readers estimate how much of an article they have already read.
A scroll indicator is a more general term. It can refer to a progress bar, an arrow, a line, an animation, or any element that tells users there is more content to scroll.
A scroll depth indicator is often used in analytics and UX tracking. It shows how far users scroll through a page, such as 25%, 50%, 75%, or 100%.
A scroll progress indicator may look simple, but it can improve the user experience in several ways.
Long pages can feel overwhelming when users do not know how much content is left. A progress bar gives them a clear sense of direction.
When readers know they are already 70% through an article, they may be more likely to finish it.
A reading progress bar can encourage visitors to continue scrolling. It creates a subtle sense of completion, especially on detailed guides, tutorials, and educational posts.
This is useful for websites that publish long-form content.
A scroll progress UI gives structure to lengthy pages. It helps users feel that the content has a clear beginning, middle, and end.
This is especially helpful for:
Modern websites are expected to feel smooth, responsive, and interactive. A well-designed scroll progress bar adds a small but noticeable interactive touch.
It makes the website feel more polished without overwhelming the user.
Mobile users often scroll through long pages quickly. A sticky reading progress bar can help them understand where they are in the content without needing to manually check the page length.
Scroll Progress UI can be used on different types of websites and pages.
Blogs are one of the most common places to use a reading progress bar. If your post is long, a scroll progress bar can help readers track their progress.
Documentation pages often contain detailed technical instructions. A scroll progress indicator helps users move through long guides with more confidence.
Long landing pages can use scroll progress UI to guide users through product benefits, features, testimonials, pricing, and calls to action.
Educational websites can use scroll progress indicators to show lesson progress or reading completion.
Designers, photographers, developers, and agencies can use scroll progress UI to create a more interactive portfolio experience.
Long product pages with many sections can benefit from scroll progress indicators, especially when they include features, use cases, reviews, and FAQs.
Scroll-based storytelling pages often use progress indicators to help users understand where they are in the narrative.
There are several ways to design a scroll progress UI. The best option depends on your website layout and content type.
This is the most popular type. A thin bar appears fixed at the top of the page and fills as the user scrolls.
Best for:
A bottom progress bar works the same way as a top progress bar, but it appears at the bottom of the screen.
A circular indicator fills around a circle as the user scrolls. It is often placed in the bottom-right corner of the screen.
A vertical progress line appears on the left or right side of the page.
This type shows the scroll progress as a number, such as 25%, 50%, or 100%.
This combines a scroll progress indicator with a button that takes users back to the top of the page.
You can create a simple scroll progress bar using only HTML, CSS, and JavaScript.
This method is useful if you do not want to use a plugin or external library.
Place this code near the top of your page body.
<div class="scroll-progress-wrapper" aria-hidden="true"> <div id="scroll-progress-bar"></div> </div>
The wrapper holds the progress bar, and the inner element changes width as the user scrolls.
.scroll-progress-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 5px; background: transparent; z-index: 9999; } #scroll-progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #3D5AFE, #06B6D4); transition: width 0.1s ease-out; }
This creates a thin fixed progress bar at the top of the page.
You can change:
document.addEventListener("DOMContentLoaded", function () { const progressBar = document.getElementById("scroll-progress-bar"); if (!progressBar) return; let ticking = false; function updateScrollProgress() { const scrollTop = window.scrollY || document.documentElement.scrollTop; const documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrollProgress = documentHeight > 0 ? (scrollTop / documentHeight) * 100 : 0; progressBar.style.width = `${Math.min(Math.max(scrollProgress, 0), 100)}%`; ticking = false; } window.addEventListener( "scroll", function () { if (!ticking) { window.requestAnimationFrame(updateScrollProgress); ticking = true; } }, { passive: true } ); updateScrollProgress(); });
This script calculates how far the user has scrolled and updates the width of the progress bar.
The scroll progress is calculated using this formula:
scrollProgress = (scrollTop / documentHeight) * 100;
Where:
scrollTop
documentHeight
There are several ways to add a reading progress bar in WordPress.
You can use:
Let’s go through the most practical methods.
Using a plugin is the easiest method for most WordPress users.
A WordPress reading progress bar plugin usually lets you customize:
Before choosing a plugin, check whether it offers:
A plugin is a good choice if you want a fast setup without editing code.
If you prefer a lightweight solution, you can add a scroll progress bar using custom CSS and JavaScript.
This method is useful for developers or site owners who want more control.
You can add this inside your theme header file, a custom hook, or a code snippet tool.
<div class="cc-scroll-progress" aria-hidden="true"> <div id="cc-scroll-progress-bar"></div> </div>
Add this CSS in Appearance > Customize > Additional CSS or your child theme stylesheet.
.cc-scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 99999; background: transparent; } #cc-scroll-progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #3D5AFE, #06B6D4); transition: width 0.15s ease-out; }
Add this JavaScript through your child theme or a safe code snippet manager.
document.addEventListener("DOMContentLoaded", function () { const bar = document.getElementById("cc-scroll-progress-bar"); if (!bar) return; function updateBar() { const scrollTop = window.scrollY; const docHeight = document.documentElement.scrollHeight - window.innerHeight; const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0; bar.style.width = progress + "%"; } window.addEventListener("scroll", updateBar, { passive: true }); updateBar(); });
Use this method if:
Avoid this method if you are not comfortable editing theme files or adding custom scripts.
If your website is built with Elementor, you may be able to add a scroll progress indicator using Elementor widgets, custom code, or third-party add-ons.
For Elementor websites, the best placement is usually:
If your website has a sticky header, make sure the progress bar does not overlap the navigation menu.
A sticky top scroll progress bar stays visible while the user scrolls.
Here is a simple version.
<div class="sticky-progress"> <div class="sticky-progress-fill" id="stickyProgressFill"></div> </div>
.sticky-progress { position: fixed; top: 0; left: 0; width: 100%; height: 6px; z-index: 9999; background: #f1f1f1; } .sticky-progress-fill { height: 100%; width: 0; background: #3D5AFE; }
const stickyFill = document.getElementById("stickyProgressFill"); window.addEventListener( "scroll", function () { const scrollTop = document.documentElement.scrollTop; const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; const progress = (scrollTop / scrollHeight) * 100; stickyFill.style.width = progress + "%"; }, { passive: true } );
This creates a clean top progress bar for long articles and pages.
A bottom scroll progress bar can be useful when your website already has a fixed header.
Use this CSS instead of top positioning:
.scroll-progress-wrapper { position: fixed; bottom: 0; left: 0; width: 100%; height: 5px; z-index: 9999; } #scroll-progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #3D5AFE, #06B6D4); }
A bottom progress bar is often better for mobile layouts because it avoids interfering with navigation.
A circular scroll progress indicator is a modern alternative to the classic horizontal progress bar.
It is usually placed in the bottom-right corner and can also work as a scroll-to-top button.
<button class="circle-progress" id="circleProgress" aria-label="Back to top"> <span id="circleProgressText">0%</span> </button>
.circle-progress { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border: none; border-radius: 50%; cursor: pointer; background: conic-gradient(#3D5AFE 0%, #e5e7eb 0%); display: flex; align-items: center; justify-content: center; z-index: 9999; } .circle-progress::before { content: ""; position: absolute; width: 44px; height: 44px; background: #ffffff; border-radius: 50%; } .circle-progress span { position: relative; font-size: 12px; font-weight: 600; }
const circle = document.getElementById("circleProgress"); const circleText = document.getElementById("circleProgressText"); function updateCircleProgress() { const scrollTop = window.scrollY; const docHeight = document.documentElement.scrollHeight - window.innerHeight; const progress = docHeight > 0 ? Math.round((scrollTop / docHeight) * 100) : 0; circle.style.background = `conic-gradient(#3D5AFE ${progress}%, #e5e7eb ${progress}%)`; circleText.textContent = `${progress}%`; } window.addEventListener("scroll", updateCircleProgress, { passive: true }); circle.addEventListener("click", function () { window.scrollTo({ top: 0, behavior: "smooth" }); }); updateCircleProgress();
This creates a circular scroll progress button with a percentage label.
If your website or app is built with React, you can create a reusable scroll progress component.
import { useEffect, useState } from "react"; export default function ScrollProgressBar() { const [scrollProgress, setScrollProgress] = useState(0); useEffect(() => { function updateScrollProgress() { const scrollTop = window.scrollY; const documentHeight = document.documentElement.scrollHeight - window.innerHeight; const progress = documentHeight > 0 ? (scrollTop / documentHeight) * 100 : 0; setScrollProgress(progress); } window.addEventListener("scroll", updateScrollProgress, { passive: true }); updateScrollProgress(); return () => { window.removeEventListener("scroll", updateScrollProgress); }; }, []); return ( <div className="scroll-progress-container"> <div className="scroll-progress-bar" style={{ width: `${scrollProgress}%` }} /> </div> ); }
.scroll-progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 5px; z-index: 9999; } .scroll-progress-bar { height: 100%; background: linear-gradient(90deg, #3D5AFE, #06B6D4); transition: width 0.1s ease-out; }
This component can be added to your main layout, blog template, or article page.
In Next.js, you need to make sure the component runs only on the client side because it uses the window object.
window
"use client"; import { useEffect, useState } from "react"; export default function ScrollProgressBar() { const [progress, setProgress] = useState(0); useEffect(() => { const handleScroll = () => { const totalHeight = document.documentElement.scrollHeight - window.innerHeight; const currentProgress = totalHeight > 0 ? (window.scrollY / totalHeight) * 100 : 0; setProgress(currentProgress); }; window.addEventListener("scroll", handleScroll, { passive: true }); handleScroll(); return () => window.removeEventListener("scroll", handleScroll); }, []); return ( <div className="fixed top-0 left-0 z-50 h-1 w-full"> <div className="h-full bg-blue-600 transition-all duration-100" style={{ width: `${progress}%` }} /> </div> ); }
You can place this component inside your layout.js, article template, or blog post page.
layout.js
Tailwind CSS makes it easy to style the progress bar.
<div class="fixed top-0 left-0 z-50 h-1 w-full"> <div id="tailwindProgress" class="h-full bg-blue-600" style="width: 0%"></div> </div>
const progress = document.getElementById("tailwindProgress"); window.addEventListener( "scroll", function () { const scrollTop = window.scrollY; const pageHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollPercent = pageHeight > 0 ? (scrollTop / pageHeight) * 100 : 0; progress.style.width = `${scrollPercent}%`; }, { passive: true } );
This is a simple way to add a scroll progress indicator to a Tailwind-based website.
A scroll progress indicator should improve the user experience, not distract from it.
Here are some best practices to follow.
A scroll progress bar should be easy to understand. Avoid unnecessary animations, large shapes, or distracting effects.
A thin bar is usually enough.
Use your brand color to make the progress bar feel connected to your website design.
For example, if your brand colors are blue and cyan, you can use a gradient progress bar.
background: linear-gradient(90deg, #3D5AFE, #06B6D4);
If your website has a sticky header, make sure the progress bar does not hide the navigation menu.
You can place it:
Test the scroll progress bar on mobile devices.
Make sure it does not:
The progress bar should be visible against the page background.
If the progress bar is too light or too thin, users may not notice it.
A scroll progress bar should be lightweight. Avoid loading large libraries only for this small feature.
Use simple JavaScript whenever possible.
Some users prefer reduced motion. Avoid overly animated progress effects.
You can use this CSS to reduce transitions for users who prefer less motion:
@media (prefers-reduced-motion: reduce) { #scroll-progress-bar { transition: none; } }
A scroll progress bar is not useful on short pages where there is very little scrolling.
Use it mainly on long-form content.
Accessibility is important when adding any UI element.
Here are some tips:
A progress bar should not communicate important information using color only. If needed, you can add a percentage label for clarity.
If the progress bar is only decorative, add:
aria-hidden="true"
This prevents screen readers from announcing unnecessary updates.
If your circular progress indicator also works as a scroll-to-top button, use a real button element and add an accessible label.
<button aria-label="Back to top"> 50% </button>
If the scroll indicator is clickable, users should be able to access it with the keyboard.
Do not use flashing effects or aggressive animations. Keep the progress movement smooth and subtle.
A badly coded scroll progress bar can affect page performance, especially on long pages.
Follow these performance tips:
Use { passive: true } when adding scroll event listeners.
{ passive: true }
window.addEventListener("scroll", updateProgress, { passive: true });
This helps the browser handle scrolling more smoothly.
For smoother performance, update the progress bar inside requestAnimationFrame.
requestAnimationFrame
window.requestAnimationFrame(updateProgress);
This tells the browser to update the UI at the right time.
Do not run too many calculations during every scroll event.
Keep the logic simple:
For advanced performance, you can animate with transform: scaleX() instead of changing width.
transform: scaleX()
Example:
.progress-bar { transform-origin: left; transform: scaleX(0); }
progressBar.style.transform = `scaleX(${progress / 100})`;
This can be smoother because transforms are usually more efficient than layout-changing properties.
Here is a performance-friendly version using transform.
transform
<div class="progress-track"> <div id="progressTransform" class="progress-transform"></div> </div>
.progress-track { position: fixed; top: 0; left: 0; width: 100%; height: 5px; z-index: 9999; overflow: hidden; } .progress-transform { height: 100%; background: linear-gradient(90deg, #3D5AFE, #06B6D4); transform-origin: left; transform: scaleX(0); }
const progressTransform = document.getElementById("progressTransform"); window.addEventListener( "scroll", function () { const scrollTop = window.scrollY; const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight; const progress = scrollableHeight > 0 ? scrollTop / scrollableHeight : 0; progressTransform.style.transform = `scaleX(${progress})`; }, { passive: true } );
This method avoids changing the width on every scroll and can feel smoother on some websites.
Sometimes, a scroll progress indicator may not work correctly. Here are common problems and how to fix them.
z-index
Make sure your HTML includes the progress bar element:
<div id="scroll-progress-bar"></div>
Then check that your CSS has a high enough z-index:
z-index: 9999;
Also make sure your JavaScript runs after the page loads.
Check whether the JavaScript ID matches the HTML ID.
If your HTML uses:
Your JavaScript should use:
document.getElementById("scroll-progress-bar");
The IDs must match exactly.
Calculate the document height dynamically during scroll:
const documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
This helps keep the percentage accurate even when the page height changes.
Place the progress bar below the sticky header.
.scroll-progress-wrapper { top: 72px; }
Change 72px to match your header height.
72px
Test your progress bar on different devices and use responsive CSS.
@media (max-width: 768px) { .scroll-progress-wrapper { height: 4px; } }
Also avoid placing the bar where it overlaps mobile menus or sticky buttons.
Use requestAnimationFrame and passive scroll listeners.
let ticking = false; window.addEventListener( "scroll", function () { if (!ticking) { window.requestAnimationFrame(function () { updateProgress(); ticking = false; }); ticking = true; } }, { passive: true } );
This can make the scroll progress animation smoother.
When choosing a WordPress scroll progress bar plugin, do not only look at the name. Look at the features that matter for your website.
A good plugin should include:
You should be able to place the progress bar at the top, bottom, left, or right side of the page.
The plugin should let you match the bar color with your brand.
Some websites need a thin bar, while others may need a more visible indicator.
A good plugin should allow you to show the progress bar only on selected post types, such as:
You may not want to show the progress bar on every page. For example, it may not be useful on:
Some plugins include estimated reading time along with the progress bar.
This can be helpful for blog posts and educational content.
You should be able to enable or disable the progress bar on mobile devices.
Choose a plugin that does not add unnecessary scripts or slow down your website.
Here are some practical design ideas you can use.
A thin top progress bar with one solid brand color.
Best for: Blogs, tutorials, and articles.
A colorful progress bar using two or more brand colors.
Best for: Modern SaaS websites, creative blogs, and landing pages.
A circle that fills as the user scrolls.
Best for: Portfolio websites, storytelling pages, and interactive designs.
A progress indicator combined with estimated reading time.
Best for: Content-heavy blogs and educational websites.
A circular progress indicator that also brings users back to the top.
Best for: Long guides, documentation, and product pages.
The best placement depends on your website layout.
This is the most common and familiar placement. It works well for blogs and articles.
Use this if your website has a sticky navigation menu.
This is useful for mobile-first designs or websites with fixed headers.
This works well for documentation, timelines, and long guides.
This is best for circular progress indicators or scroll-to-top buttons.
Not every website needs a scroll progress indicator.
You should use Scroll Progress UI when your page has enough content to scroll through.
It is useful for:
You may not need it for:
A scroll progress bar should support the user experience. If it does not add value, it may be unnecessary.
A scroll progress bar is not a direct ranking factor. Adding one does not automatically make your page rank higher.
However, it can support better user experience, which may indirectly help your content performance.
For example, a good reading progress indicator can:
SEO is not only about keywords. It is also about helping users find, understand, and complete the content they came for.
A scroll progress UI supports that goal by making long pages feel easier to consume.
Blogs are one of the best places to use a reading progress bar.
If your blog posts are usually 1,500 words or longer, a progress bar can help readers stay engaged.
For blog posts, use:
A simple reading progress bar can make your blog feel more professional and easier to read.
WordPress users can add Scroll Progress UI in multiple ways.
The best method depends on your skill level.
Use a WordPress reading progress bar plugin.
This is the easiest option because you can customize the bar without editing code.
Use custom HTML, CSS, and JavaScript.
This gives you more control and keeps the feature lightweight.
Use Elementor custom code, HTML widgets, or an Elementor-compatible progress bar add-on.
Use a small custom JavaScript snippet instead of adding a full plugin.
Landing pages often include many sections:
A scroll progress bar can help users understand how far they are through the page.
For landing pages, you can use:
A section-based progress indicator can be especially useful when your landing page tells a story.
Documentation pages are often long and detailed. Users may scroll through setup steps, code examples, FAQs, and troubleshooting sections.
A scroll progress UI can make documentation easier to follow.
For documentation pages, consider:
Combining a reading progress bar with a table of contents can create a much better documentation experience.
Mobile users scroll more frequently than desktop users. A progress bar can help them understand page length quickly.
For mobile websites:
A 3px or 4px progress bar is usually enough for mobile screens.
Both options are valid.
For most beginner WordPress users, a plugin is the easiest option. For developers, custom code is often better.
When writing or updating content about this topic, include related search terms naturally throughout the article.
Useful keyword variations include:
Do not force these keywords into every paragraph. Use them where they fit naturally.
Scroll Progress UI is a small design feature that can make long webpages easier and more enjoyable to read.
Whether you call it a scroll progress bar, reading progress indicator, page scroll progress bar, or scroll depth indicator, the purpose is the same: to help users understand their progress while moving through content.
For WordPress websites, you can add a reading progress bar with a plugin or custom code. For custom websites, you can build one with HTML, CSS, JavaScript, React, Next.js, or Tailwind CSS.
The best scroll progress UI should be:
If your website publishes long-form content, tutorials, documentation, or detailed landing pages, adding a scroll progress indicator can be a smart way to improve the reading experience and keep visitors engaged until the end.
Scroll Progress UI is a visual interface element that shows how far a user has scrolled through a webpage. It helps visitors understand their reading or browsing progress.
A reading progress bar is a type of scroll progress indicator used on blog posts, articles, and long-form content. It fills as the reader moves down the page.
You can add a scroll progress bar in WordPress using a plugin, custom HTML/CSS/JavaScript, Elementor custom code, or a theme feature.
Yes. You can create a scroll progress bar using simple HTML, CSS, and JavaScript. This is a lightweight option for users who are comfortable adding code.
Create a fixed progress bar with CSS, then use JavaScript to calculate the scroll percentage and update the bar width as the user scrolls.
Yes, a reading progress bar can improve user experience by helping visitors understand how much content they have read and how much remains.
Yes, it can be useful on mobile websites, especially for long blog posts and tutorials. Make sure it does not overlap mobile navigation or sticky buttons.
You can calculate the scroll percentage with JavaScript by dividing the current scroll position by the total scrollable page height, then multiplying the result by 100.
The best plugin depends on your needs. Look for a lightweight plugin with color customization, placement control, mobile support, post type targeting, and recent updates.
This page was last edited on 3 July 2026, at 6:06 pm
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
How many people work in your company?Less than 1010-5050-250250+
By proceeding, you agree to our Privacy Policy