jQueryなし！
シンプルなローディング画面の作り方

ページの読み込みが完了してからページ全体を表示したいとき、待機中に表示しておくローディング画面。

ローディング画面を表示することで「いま読み込んでいるよ！」と視覚的にユーザーに伝えることができ、何も表示しない場合よりも読込中の離脱率を下げる効果があるそうです。

自分が読者の立場でも、ただの白い画面で待たされると「なにかのエラー？」と不安になったりしますが、何かしらのアクション（ローディング画面）があると読み込み中と分かるぶん安心感がありますし、待ち時間も少し楽しく感じられることも。

先日、ちょうどローディング画面を作る機会があったので、備忘録を兼ねて作り方をまとめておきたいと思います。

ローディング画面の基本パーツ

ローディング画面を作るにあたって、用意するのは以下の2つです。

①ローディング判定のプログラム

②ローディング中に表示する画面

順番に見ていきましょう！

ローディング判定のプログラム

ローディング判定のプログラムは、簡単な java script コードでローディング完了を判定する方法と、CSSのアニメーション機能で固定の待ち時間を指定する方法などがあります。

java script で実装すれば確実にローディング完了を判定でき、2度目以降の訪問でキャッシュが残っている状態では、読み込み済みのぶん待ち時間が自動的に短縮されます。

CSSのアニメーション機能で固定の待ち時間を指定する場合は、java script を使わずに実装できるため手軽で、ユーザー設定で java script を無効化している場合でも有効です。

ただし、ローディング判定をしているわけではないので、ページのデータ量やユーザーの通信環境によっては、読み込み完了前にページが表示されてしまう可能性もあります。

また、ローディング完了に関わらず指定の時間を待つため、2度目以降の訪問などでも待ち時間は変わりません。

今どきは java script を活用しているサイトも多くかなり生活になじんでいると思われるので（ショッピングサイトやSNSサイト、Googleマップなど）、今回は ローディング判定のできる java script で実装することにします。

java scriptソース

「id="loading"」を指定した要素（ローディング画面）を取得して、ローディングが完了したら class を「.loadup」に変更するコードです。

わずか3行なので、ここではHTMLファイルに直書きします。

<script>
window.onload = function(){
  const load = document.getElementById('loading');
  load.classList.add('loadup');
}
</script>

ローディング中に表示する画面

ローディング画面は、本文ページの上に不透明要素を重ねて表示しておき、ローディング完了したら非表示にすることで実装します。

ここで用意したローディング画面のエフェクトは、シンプルに白い画面に「loading……」と表示されるだけなので、お好みでアレンジしてみてください。

ローディング画面を実装する、基本的なHTMLとCSSは以下のような感じです。

HTMLソース

<div id="loading">
  <div class="loading-set">
  <div class="loading-anime">loading……</div>
  </div>
</div>

<div class="contents">
  <img src="test.jpg" width="300" height="auto" alt="">
</div>

ちなみに、java script でローディング完了判定する場合、ローディング待ちが発生するような重い画像などを使わないと、実際にローディング画面は表示されません。

テスト段階では、お手持ちの「これぞ！」というサイズ大きめの画像などを使って、動作を確認してみてくださいね。

CSSソース

CSSでは、ローディング画面になる要素を本文に重ねる指定と、ローディング完了後に適用するスタイルを指定しておきます。

/*ローディング画面*/
#loading{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  transition: all .5s;
  z-index: 999;
}
/*エフェクト*/
.loading-set{
  font-size: 16px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.loading-anime{
  position: relative;
  left: 2em;
}
.loading-anime::after{
  content: "";
  background: #fff;
  width: 3em;
  height: 1em;
  display: inline-block;
  transition: all 1s;
  animation: loadingset 1.0s infinite ease-in-out;
}
@keyframes loadingset{
  0%{ transform: translateX(-2em); }
  100%{ transform: translateX(0); }
}
/*ローディング完了後に非表示にする*/
.loadup{
  opacity: 0;
  visibility: hidden;
}

ちなみに java script を使わずにCSSだけで制御する場合は、ローディング画面となる要素に対して、指定秒数後に非表示になる指定をすると実装できます。

「animation-fill-mode」プロパティに「forwards」を指定すると、アニメーションを繰り返さず（キーフレームの初期値に戻らず）、100%のキーフレーム状態で固定できます。

ローディング画面をフェードアウトさせる場合は、半透明になる時間のぶん、少し長めに指定した方が安心です。

/*ローディング画面*/
#loading{
  animation: loadup2 3.5s forwards;
}
/*フェードアウトして非表示*/
@keyframes loadup2{
  70%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    visibility: hidden;
  }
}

シンプルなローディング画面の作り方
余談

基本的には、ローディング画面が必要ないほど速く表示できるページ作りが理想的ですが、画像主体のページなどではどうしても重くなりがちです。

せっかく綺麗にデザインしても、主役の画像の読み込みが遅れてページがガタガタするのを見せてしまうのは、スマートとは言えませんね。

基本的には軽いページ作りを目指しつつ、必要に応じて、読み込み時間を少しでも楽しんでもらう工夫をしてみるのも楽しいですね！