One of the first things i wanted to learn in web dev after learning JS was making a scroll progress indicator. It's mostly used as a UI element that gives the user a better understanding of where they are in the website.

HTML

With HTML we make a div (we'll call the scrollbar indicator) that contains our scrollbar.

    <div class="scrollbar-indicator">
        <div class="scrollbar">
        </div>
    </div>

CSS

Now with CSS we give the indicator a width of 100% and a thin height (like 2%). We also need to give it a position of fixed so the user can always see it on the top of the page. For the scrollbar itself we'll give it a height of 100% but a width of 0%, this will be important for our Javascript later. After that give it any background color you like!

.scrollbar-indicator {
    width: 100%;
    height: 2%;
    position: fixed;

}

.scrollbar {
    height: 100%;
    background-color: black;
    width: 0%;
}

JS

Now for the Javascript, first we make two variables that contain the scrollbar and scrollbar indicator. Then we make a function that'll be used to later tell our scrollbar what percent of the website we're at.

In that function we divide the windows scrollY property with the windows innerHeight subtracted from the the body's scroll Height. The scrollY property tells us how many pixels we passed from the top left of the window, while the scrollHeight property tells us the height of an element's content (meaning the border and padding is excluded). After this, we multiply it by 100.

Now we make another function where we set the scrollbars width to the scrollbars value and use requestFrameUpdate to make sure the function reruns all the time so we can always get the new scroll percentage. So then there you hae it! That's how you make a scrollbar indicator. You can see a preview of the code i used as an example of the scrollbar indicator in the codepen below.

var scrollContainer = document.querySelector('.scrollbar-indicator');
var scrollbar = scrollContainer.querySelector('.scrollbar');

function scrollPercent() {
    return ((window.scrollY) / (document.body.scrollHeight - window.innerHeight) * 100 );
}

function updateProgressBar() {
scrollbar.style.width = scrollPercent() + '%';
requestAnimationFrame(updateProgressBar);
}

updateProgressBar();

You can also make a horizontal scroll indicator by making the scrollbar vertical and have it's height equal the scroll percentage. If you have any questions you can ask in the comments below, otherwise thanks for reading and have a great day/night!