ローディング画面を気軽に実装！ PACE.js の使い方

ちょっとリッチなコンテンツを作る際に用いられるローディング画面。
今回は読み込むcssを変えるだけでローディングのエフェクトを変更できるPACEの使い方を紹介します。

まずは公式から一式をダウンロードしましょう。
その中から最低限必要なものは以下の通りです。たくさんファイルが入ってますが、本体となるpace.jsとエフェクトの種類を決めるcssを読み込みます。

<link href="pace-theme-barber-shop.css" rel="stylesheet" />
<script src="pace.js" type="text/javascript"></script>

基本的には、上記のようにjsとテンプレート用のcssを読み込めば自動的に要素が追加されてローディングエフェクトが追加されます。
ただ、いろいろとオプションも用意されています。

こちらは進捗情報を取得する要素を選択するためのオプション。

paceOptions = {
  ajax: false,
  document: false,
  eventLag: false,
  elements: {
    selectors: ['.sample']
  }
};

ローディングに関するイベントも取得することができます。
イベントのタイミングは、start,stop,restart,done,hideの５つ。下記のような書き方で実行します。

Pace.on("done",function(){
  //Pace正常作動して、ローディングが完了したら実行される処理
  console.log("完了！");
});

他にもいろいろなオプションがあるので公式のドキュメントで確認してみてください。

エフェクトの少し調整したい場合でも読み込むテンプレートcssをカスタマイズすれば良いのでjsが苦手な場合でも、割合カスタマイズしやすいはずです。

ARAKAZE NOTE