Horizontal Page Scroll Progress Bar Indicator With Html CSS & Javascript | NoorHUB

Horizontal Page Scroll Progress Bar Indicator create using HTML, CSS, JS

Getting started

It’s pretty easy to get started with Statusfy.

Create a new index.html file with this HTML code..

<div class="scroll-line"></div>

    <div class="page-content">

      <header class="header-top">

        <div>

          <div style="text-align: center;">

            <h1 class="heading-style">Scroll Progress</h1>

          </div>

        </div>

        </header>

    <div class="container"></div>

 </div>

Create a style.css file with this CSS code.

.container {

    height: 500vh;

}

::-webkit-scrollbar {

    width: 10px;

    background-color: #f5f5f5;

}

::-webkit-scrollbar-thumb {

    background-color: #f90a23;

    background-image: linear-gradient(to right, #ff0c00, #ff0000);

}

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

    background-color: #f5f5f5;

}

.scroll-line {

    position: fixed;

    top: 0;

    left: 0;

    height: 10px;

    background-color: #f90a23;

    background-image: linear-gradient(to right, #ff0c00, #ff0000);

    height: 10px;

    transition: 0.5s cubic-bezier(0.075, 0.82, 0.165, 1) width;

    z-index: 1;

}

Create script.js file with this Javascript Code

const scrollLine = document.querySelector(".scroll-line");

function fillScrollLine() {

    const windowHeight = window.innerHeight;

    const fullHeight = document.body.clientHeight;

    const scrolled = window.scrollY;

    const percentScrolled = (scrolled / (fullHeight - windowHeight)) * 100;

    scrollLine.style.width = `${percentScrolled}%`;

}

window.addEventListener("scroll", debounce(fillScrollLine));

function debounce(func, wait = 15, immediate) {

    var timeout;

    return function () {

        var context = this,

        args = arguments;

        var later = function () {

            timeout = null;

            if (!immediate) func.apply(context, args);

        };

        var callNow = immediate && !timeout;

        clearTimeout(timeout);

        timeout = setTimeout(later, wait);

        if (callNow) func.apply(context, args);

    };

}

then,

connect the style.css and script.js file in index.html file

I hope you know how to add css and js file in html. Or follow tutorial video..

Download Source Code