I believe everyone has been looking forward to the page-loading progress bar effect for a long time. Below is the WordPress top-loading progress bar I created. It is simple and can produce a cool page-loading progress bar effect.

For implementing a top-loading progress bar in WordPress, the first thing that comes to mind is CSS, but it may not be very compatible with older versions of IE browsers. However, people who use WordPress basically ignore IE. So I’ll publish the tutorial directly below.

CSS Code

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 Code

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

jQuery Code

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

Make practical use of it: the time set above is 3 seconds, so set the duration according to your needs.

At this point, the WordPress top-loading progress bar should have appeared. I think you should know that pressing Ctrl + F5 performs a cache-bypassing refresh. After refreshing, check the webpage to see whether the loading progress bar appears at the top.