Carefree

Implementing a Top Percentage-Based Scroll Loading Progress Bar in WordPress

3,913 0

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

Today, I’m bringing you a horizontal browsing progress bar. As you browse 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

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

CSS Code

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

JS Code

JavaScript
$(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.

Comments

(0)

No comments yet. Start the conversation.

Leave a comment