얼마 전 《WordPress 상단 로딩 진행률 표시줄 코드》라는 글을 작성한 적이 있습니다. 웹사이트 로딩 시간을 표시하기 위한 것으로, 지난번 기능과 비슷합니다.

오늘 소개해 드릴 것은 가로 방향의 페이지 진행률 표시줄입니다. 웹페이지를 아래로 스크롤하면 진행률 표시줄이 점점 길어집니다. 또한 스크롤 바 색상을 사용자 지정할 수도 있습니다. 현재 이 사이트에도 해당 코드를 적용했으므로, 이 사이트의 페이지에서 효과를 직접 확인할 수 있습니다. 아래는 코드 공유입니다.

HTML 코드

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

CSS 코드

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

JS 코드

$(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();
    });
});

주의: HTML 코드는 body 태그 아래 첫 번째 줄에 배치해야 합니다.