【コピペOK！】jQueryを使った簡単なローディング画面の作り方

ページ読み込み中のローディング画面ってどうやって作るんだろう？

動画を使ったサイトなど、ページの読み込みに時間がかかるサイトではぜひ取り入れたいですね。

今回はjQueryと画像を使ったとても簡単なローディング画面の作り方を解説します。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

jQueryを使った簡単なローディング画面の作り方

まず初めに今回実装するローディングにはjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。

jQueryの使い方はこちらの記事を参照下さい。

コード解説

コードを見ていきますが、重要ではないコードは省略しています。

全て確認したい場合はCodePenのHTMLやCSSをクリックして下さい。

HTML

まずはHTMLから書いていきます。

<div class="loader-bg js-loader-bg">
  <div class="loader js-loader">
    <img src="画像パス" alt=""/>
  </div>
</div>
<div class="wrap">
  <div class="content">ページ読み込み後に表示させるコンテンツ</div>
</div>

.loader-bgがローディング全体を囲むコードですが、書く場所はbody開始タグの直後くらいがいいかと思います。

また今回は画像ですが、CSSアニメーションにしてもOKです。

今回は省略していますが.wrap内にheaderタグやmainタグが入ります。

CSS

次はCSSを書いていきます。

.loader-bg {
  align-items: center; /* 上下左右中央 */
  background-color: #add6ff;
  display: flex; /* 上下左右中央 */
  height: 100vh; /* 縦いっぱい */
  justify-content: center; /* 上下左右中央 */
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw; /* 横幅いっぱい */
  z-index: 9999;
}

ローディング全体のコードだけですが、ポイントは以下になります。

フレックスボックスで画像を上下左右中央にする
heightとwidthで画面いっぱいにする
position: fixed;でコンテンツは見えないようにする

ここで1つ注意があります。

高さ100vhはスマホのアドレスバーを含む高さなので、スマホではこのように見えます。

スマホ：height: 100vh;

アドレスバーとは下のバーのことですね。

100vhはこのアドレスバーを含めて縦100％なので、表示部分の中心にはなりません。

これを解決するには以下のコードにする必要があります。

.loader-bg {
  height: calc( var(--vh) * 100 );
}

const spHeight = window.innerHeight;
document.documentElement.style.setProperty("--vh", spHeight / 100 + "px");

JavaScriptを書く必要があるのでちょっと難しく見えますが、コピペすればOKです。

そしてこのようになります。

スマホで縦100%

ただし今回のデモではこの書き方はせずheight: 100vh;としています。

〜追記〜

現在は縦100%にするのにdvhを使うと簡単に実装できます。

dvhでスマホの高さ100%にする方法については以下の記事を参照下さい。

: CSSのdvhでスマホの高さ100%にする方法【アドレスバー問題解決】
続きを見る

jQuery

最後にjQueryを書いていきます。

// ページの読み込み完了時にローディング画面をフェードアウト
$(window).on("load", function () {
  $(".js-loader").delay(800).fadeOut(600); // 画像をフェードアウト
  $(".js-loader-bg").delay(1300).fadeOut(600); // 背景色をフェードアウト
});
// ページの読み込みが完了しなくても5秒経ったら強制的にローディング画面をフェードアウト
setTimeout("stoploading()", 5000);
function stoploading() {
  $(".js-loader-bg").fadeOut(600);
}

3行目はページ読み込み後の0.8秒後に画像をフェードアウト、4行目は1.3秒後に背景色をフェードアウトさせています。

ページの読み込みが遅い場合はユーザーが離脱する可能性があるので、後半のコードは5秒経ってもページの読み込みが終わっていない場合は強制的にローディング画面をフェードアウトさせています。

前半は『ページ読み込み後にさせる動作』を書くので、かなり自由度が高くカスタマイズ出来るかと思います。