페이지 로딩 진행 표시줄 효과를 여러분 모두 오랫동안 기대해 오셨을 것이라 생각합니다. 아래는 제가 작성한 WordPress 상단 로딩 진행 표시줄 구현 코드입니다. 아주 간단하게 멋진 페이지 로딩 진행 표시줄 효과를 구현할 수 있습니다.

WordPress 상단 로딩 진행 표시줄을 구현할 때 가장 먼저 떠오른 것은 CSS였습니다. 하지만 IE 구버전 브라우저와의 호환성이 좋지 않을 수 있습니다. 그러나 WordPress를 사용하는 사람들은 기본적으로 IE를 무시하죠. 그럼 바로 튜토리얼을 소개하겠습니다.

CSS 코드

body {
    margin: 0;
}

#progress {
    position: fixed;
    height: 2px;
    background: #2085c5;
    transition: opacity 500ms linear;
}

#progress.done {
    opacity: 0;
}

#progress span {
    position: absolute;
    height: 2px;
    -webkit-box-shadow: #2085c5 1px 0 6px 1px;
    -webkit-border-radius: 100%;
    opacity: 1;
    width: 150px;
    right: -10px;
    -webkit-animation: pulse 2s ease-out 0s infinite;
}

@-webkit-keyframes pulse {
    30% {
        opacity: .6;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: .6;
    }
}

HTML 코드

<div id="progress">
    <span></span>
</div>

jQuery 코드

$({property: 0}).animate({property: 100}, {
    duration: 3000,
    step: function() {
        var percentage = Math.round(this.property);
        $('#progress').css('width',  percentage + "%");
        if (percentage == 100) {
            $("#progress").addClass("done");
        }
    }
});

위에서는 시간을 3초로 설정했으니, 실제 필요에 따라 시간을 설정해 보세요.

이 단계까지 진행하면 WordPress 상단 로딩 진행 표시줄이 나타납니다. 아마 아시겠지만 Ctrl + F5를 누르면 캐시를 무시하고 새로 고침할 수 있습니다. 새로 고침한 후 웹 페이지를 확인해 보세요. 상단에 로딩 진행 표시줄이 나타났나요?