ファイルを読み込むだけでローディング画面を表示させることができるPACE.js

PACE.jsはファイルを読み込むだけでローディング画面が実装できます。
ローディング画面も、様々なテーマが用意されています。
jQueryなどのライブラリに依存していないので、ささっと導入したい時におすすめです。
ライセンスはMIT。

jQueryを使ったローディング画面の実装方法はこちら

サンプル

Loading Bar

プログレスバーが表示されるデザインです。

繰り返しロード画面を表示させたい場合はフレーム内をマウスオーバーで表示される右下の「RERUN」ををクリックしてください。

Center Atom

オブジェクトがくるくる回るデザインです。

繰り返しロード画面を表示させたい場合はフレーム内をマウスオーバーで表示される右下の「RERUN」をクリックしてください。

CSSとJSファイルをダウンロードする

配布元のサイトからCSS、jsファイルをダウンロードします。

PACE.js

  1. まず、配布元サイトにある「PACE.JS」ボタンをクリックして、jsファイルを表示して保存します。
  2. 次に「CHOOSE A COLOR」ボタンをクリックするとカラーピッカーが表示されるので、ローディング画面のテーマの色を選択します。
    img-pace-1
  3. 色を選択したら、実装したいテーマの「DOWNLOAD」ボタンをクリックして、CSSを保存します。
    img-pace-2

必要なファイルを読み込む

ダウンロードしたファイルをhtml内で読み込みます。
CSSのファイル名はダウンロードした時につけた任意の名前にしてください。
これだけでローディング画面が表示されるようになります。

<link rel="stylesheet" href="pace.css">
<script src="pace.min.js"></script>

読み込みが完了したらページの要素を表示する方法

上記のファイルを読み込むだけでも実装出来ますが、ローディング中はその他の要素を非表示にしておきたいという場合は、以下のように非表示にしたい要素をCSSで display:none; にします。
ローディングが完了すると .pace-running は外れるので、要素が表示されます。

html

<div class="wrap">
  <!-- 読み込みが完了したら表示する要素 -->
  <p>読み込み完了</p>
</div>

CSS

.pace-running .wrap {
  display:none;
}