Page Scroll Progress Bar with CSS and JavaScript

A scroll progress bar is a tool that indicates the user’s position on a webpage. It appears at the top of the page and shows how far the user has scrolled. The progress bar is particularly helpful in displaying scrolling percentage in a graphical manner, enhancing the user interface. As the user scrolls down, the progress bar fills up with the background color, indicating the percentage of page scrolling that has occurred. Conversely, when the user scrolls up, the progress bar exhibits a reverse effect.

To incorporate a scroll progress bar into a webpage, CSS and JavaScript can be used. Enhancing the aesthetic appeal of the progress bar, it is recommended to use a background color that complements the webpage’s user interface. The following code snippet provides an example of how to create a page scroll progress bar using HTML, CSS, and JavaScript.

Lorem Ipsum is simply dummy text of the printing.

Lorem Ipsum is simply dummy text of the printing. Lorem Ipsum is simply dummy text of the printing. k. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

// Execute the pageScroll function when the user scrolls the page
window.addEventListener("scroll", pageScroll);

function pageScroll() {
// Get the amount of scrolling done by the user
var winScroll = window.pageYOffset || document.documentElement.scrollTop;
// Get the total height of the page
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
// Calculate the percentage of the page that has been scrolled
var scrolled = (winScroll / height) * 100;
// Update the progress bar's width to match the percentage scrolled
document.getElementById("proBar").style.width = scrolled + "%";
}

This code uses the “addEventListener” method instead of “onscroll” for improved performance. It also uses “window.pageYOffset” instead of “document.body.scrollTop || document.documentElement.scrollTop” to get the amount of scrolling done by the user. Additionally, the code uses comments to explain each step and improve readability.

/* Use a universal font size and set the body margin to 0 */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
}

/* Position the header at the top of the page and set its width and background color */
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #f6f6f6;
}

/* Center the header text */
.header h2 {
text-align: center;
}

/* Set the progress container's width, height, and background color */
.progress-container {
width: 100%;
height: 4px;
background: #ccc;
}

/* Set the progress bar's height, background color, and initial width to 0 */
.progress-bar {
height: 4px;
background: #F5011A;
width: 0;
}

/* Set the body content padding, margin, and width */
.body-content {
padding: 50px 0;
margin: 0 auto;
width: 80%;
}