Scroll Progress Bar in JavaScript

Scroll Progress Bar in JavaScript
Code Snippet:progress scroll bar
Author: Carla
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 699
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X