ページ読み込み時のプログレスバー効果は、皆さんも以前から憧れていたことと思います。以下は私が作成した、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 を押すとキャッシュを無視して更新できます。更新後、ウェブページを再読み込みして、上部に読み込みプログレスバーが表示されるか確認してみてください。