Not long ago, I wrote an article titled “WordPress Top Loading Progress Bar Code,” which is used to display website loading time and has a function similar to the one introduced today.

Today I’m bringing you a horizontal browsing progress bar. As you scroll down the webpage, the progress bar gradually becomes longer. In addition, it supports customizing the scrollbar color. This code has already been applied to this site, and you can view the effect directly on the site’s pages. Here is the code:

HTML Code

<div id="load"></div>

CSS Code

#load {
    background-color: #ff6651;
    height: 3px;
    width: 0px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
}

JS Code

$(function() {
    function scroll_fn() {
        let document_height = $(document).height();
        let scroll_so_far = $(window).scrollTop();
        let window_height = $(window).height();
        let max_scroll = document_height - window_height;
        let scroll_percentage = scroll_so_far / (max_scroll / 100);
        $('#load').width(scroll_percentage + '%');
    }
    $(window).scroll(function() {
        scroll_fn();
    });
    $(window).resize(function() {
        scroll_fn();
    });
});

Note: The HTML code needs to be placed on the first line under the body tag.