Scroll Progress Bar in JavaScript

This JavaScript code creates a Scroll Progress Bar in a web page. It tracks and displays your scrolling progress. The bar updates as you scroll through the page, providing a visual indicator of your progress. It’s helpful for users to understand how much content they’ve scrolled through.

You can use this code on websites to add a scroll progress bar. It enhances user experience by showing how far they’ve scrolled. It’s particularly useful for long pages and helps users navigate through content more easily.

How to Create Scroll Progress Bar In JavaScript

1. In your HTML file, insert the following HTML code. This code sets up the structure for the scroll progress bar, using the <progress> element and an <div> with an image (which you can customize or replace as needed).

<progress max="0" value="0"></progress>
<div id="one">
  <img src="https://picsum.photos/650/425?image=923" alt="">
</div>

2. Copy the CSS code into your website’s stylesheet or within <style> tags in your HTML document. This CSS code is responsible for styling the progress bar and creating a gradient background. You can modify the CSS styles according to your needs.

html {
  box-sizing: border-box;
}
*, *:before, *:after{
  box-sizing: inherit;
}

body{
  background: rgb(206,220,231); /* Old browsers */
  background: -moz-linear-gradient(-25deg,  rgba(206,220,231,1) 0%, rgba(74,80,84,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-25deg,  rgba(206,220,231,1) 0%,rgba(74,80,84,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(165deg,  rgba(206,220,231,1) 0%,rgba(74,80,84,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  min-height: 200vh;
}

progress {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  color: #ea4221;
}

-webkit-progress {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  color: #ea4221;
}
progress {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  color: #ea4221;
}

progress::-moz-progress-bar { 
  background: #ea4221; 
}
progress::-webkit-progress-value {
  background: #ea4221;
}

#one{
  display:flex;
  height: 195vh;
  align-items: center;
  justify-content: center;
}

3. Finally, place the following JavaScript code in your website’s script section. This code initializes the scroll progress bar, updating its value as the user scrolls or resizes the page. It automatically adjusts to the content’s length and the user’s position on the page.

var bar = document.querySelector('progress'), 
    max = document.body.scrollHeight - innerHeight, 
    val;

bar.max = max;

addEventListener('scroll', function(){
  bar.value = window.pageYOffset;
})

addEventListener('resize', function(){
  bar.max = document.body.scrollHeight - innerHeight;
})

That’s all! hopefully, you have successfully created the scroll progress bar indicator in JavaScript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.