Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a scroll indicator with CSS and JavaScript?
A scroll indicator is a visual progress bar that shows how much of a webpage has been scrolled. As users scroll down, the indicator fills up proportionally, providing visual feedback about their reading progress through the content.
Syntax
/* Fixed header with progress container */
.header {
position: fixed;
top: 0;
width: 100%;
}
.progressContainer {
width: 100%;
height: value;
background: color;
}
.progressBar {
height: value;
background: color;
width: 0%;
}
Fixed Header Setup
First, create a fixed header that remains at the top during scrolling using the position property with the value fixed −
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #ebfffd;
}
Progress Bar Structure
Create the HTML structure for the progress indicator using a container and progress bar −
<div class="progressContainer">
<div class="progressBar"></div>
</div>
Progress Bar Styling
Style the progress container with full width and set the initial progress bar width to 0% −
.progressContainer {
width: 100%;
height: 20px;
background: #ccc;
}
.progressBar {
height: 20px;
background: #724caf;
width: 0%;
transition: width 0.3s ease;
}
Example: Complete Scroll Indicator
Here's a complete example that creates a functional scroll indicator with CSS and JavaScript −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 18px;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
}
.header {
position: fixed;
top: 0;
z-index: 1000;
width: 100%;
background-color: #f8f9fa;
padding: 20px 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.header h1 {
text-align: center;
margin: 0 0 10px 0;
color: #333;
}
.progressContainer {
width: 100%;
height: 8px;
background: #e0e0e0;
}
.progressBar {
height: 8px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
width: 0%;
transition: width 0.2s ease;
}
.content {
margin-top: 120px;
padding: 40px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.content p {
margin-bottom: 30px;
text-align: justify;
}
</style>
</head>
<body>
<div class="header">
<h1>Scroll Progress Indicator</h1>
<div class="progressContainer">
<div class="progressBar"></div>
</div>
</div>
<div class="content">
<h2>Introduction</h2>
<p>This is a demonstration of a scroll progress indicator. As you scroll down this page, the progress bar at the top will fill up to show how much content you have read.</p>
<h2>Section One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Section Two</h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Section Three</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<h2>Final Section</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
</div>
<script>
window.onscroll = function() {
updateProgressBar();
};
function updateProgressBar() {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollPercentage = (scrollTop / scrollHeight) * 100;
document.querySelector('.progressBar').style.width = scrollPercentage + '%';
}
</script>
</body>
</html>
A webpage with a fixed header containing a gradient progress bar that fills as you scroll. The progress bar starts empty and gradually fills with a purple gradient as you scroll down the content, reaching 100% when you reach the bottom of the page.
JavaScript Functionality
The JavaScript calculates scroll progress by dividing current scroll position by total scrollable height, then updates the progress bar width accordingly −
function updateProgressBar() {
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollPercentage = (scrollTop / scrollHeight) * 100;
document.querySelector('.progressBar').style.width = scrollPercentage + '%';
}
Conclusion
A scroll indicator enhances user experience by providing visual feedback about reading progress. Combine fixed positioning, CSS transitions, and JavaScript scroll events to create smooth, responsive progress tracking.
Updated on: 2026-03-15T14:45:47+05:30
559 Views
Advertisements