最近流行っているpjax。コツはいりますが画面遷移がなくなること、同じレンダリングを行わないことで表示速度が速くなると言ったメリットがあります。Ajaxも画面の一部を書き換えたりするので同じようなメリットがあります。 そんなAjax/pjaxを使った場合、ページ読み込み中のローディング表示は欠かせません。そのためのライブラリとして使ってみたいのがPACEです。

画面上部にステータスバーを出す場合。

PACEの使い方

まず最初にJavaScriptとスタイルシートを読み込みます。

<head>
  <script src="/pace/pace.js"></script>
  <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

後は以下のような感じでPACEを実行するだけです。

define(['pace'], function(pace){
  pace.start({
    document: false
  });
});

特定のエレメントでは実行しない、Ajax処理では実行しないといった指定ができます。

PACEのデモ

ローディング表示は多彩なパターンが用意されています。

バーの進み方が異なります。

画面全体を読み込み表示にすることもできます。

数字や大きなインジケータも使えます。

ローディングバーなど。

画面中央に載せる場合。

レーダーやシンプルなローディング。

pjaxを使う際に取り込んでみてはいかがでしょうか。

PACEはJavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。

PACE — Automatic page load progress bars HubSpot/pace