2022/2/19 （更新日: 2022/2/20）

jQueryとCSSでページ読み込みのローディング画面を作る方法

Coding

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

そんな疑問にお答えします。

ページの読み込み中、何も表示されない真っ白な画面表示のままだと見ている方は不安になりますよね。

サイトの表示は早いに越したことはないです。

しかし動画を使ったサイトなどではどうしてもページの読み込みに時間がかかります。

そんな場合にはローディング画面を用意しておきたいもの。

でもローディング画面の実装ってなんか難しそう。

僕もそう思っていました。

ところが調べてみると仕組みは案外簡単でした。

さあ一緒にローディング画面を作ってみましょう。

1 ローディング画面を作る方法
2 まとめ

ローディング画面を作る方法

まず今回のゴールを確認します。

中央にローディングアニメーションを配置します。

ページの読み込みが終わったらローディング画面を非表示にします。

それではやっていきましょう。

jQuery本体を読み込む

まず事前準備としてjQuery本体を読み込みます。

読み込み方がわからない方はコチラの記事を参照ください。

【初心者向け】jQuery本体を読み込む方法

jQueryがきちんと動作するかしっかり確認しておきましょう。

実装手順

ここでローディング画面実装の手順を簡単に解説します。

💡ポイント！　

HTMLで背景(loader-bg)とローディングアニメーション(loader)を配置する。
CSSで背景をブラウザ枠いっぱいに広げる。ローディングアニメーションを動作させる。
jQueryで読み込み完了後にローディング画面を非表示にする。（今回はfadeOutを使用）

複雑そうに見えるローディング画面の実装ですが、分解すると案外簡単です。

まず①HTMLで背景(loader-bg)とローディングアニメーション(loader)を配置します。

次に②CSSで背景をブラウザ枠いっぱいに広げます。

またCSSでローディングアニメーションを動作させます。

最後に③jQueryで読み込み完了後にローディング画面を非表示にします。

今回はfadeOutを使います。

HTML

HTMLの骨組みは以下のようになります。

<body>
    <!-- ローディング画面 -->
    <div class="loader-bg">
      <div class="loader"></div>
    </div>
    <!-- コンテンツ部分 -->
    <header></header>
    <main></main>
    <footer></footer>
    <!-- jQuery読み込み -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>

ローディング画面の実装に必要なのは

<div class="loader-bg">
  <div class="loader"></div>
</div>

の3行です。

CSS

/* ローディング画面背景 */
.loader-bg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #0bd;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ローディングアニメーション */
.loader {
  font-size: 10px;
  margin: 50px auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.loader:after {
  background: #0bd;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  100% {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  }
}

背景(loader-bg)をブラウザ枠いっぱいに広げます。

そのために

width: 100vw;
height: 100vh;

とします。

また上下に並んでいるローディング画面とコンテンツをpositionプロパティで重ねます。

position: fixed;
top: 0;
left: 0;
z-index: 9999;

これによりローディング画面がコンテンツの上に重なります。

display: flex;
justify-content: center;
align-items: center;

この3行はローディングアニメーションを左右上下中央に配置するために記述しています。

ローディングアニメーション(loader)の記述ですがここは下記サイトからコピペで持ってきています。

Single Element CSS Spinners

Single Element CSS Spinnersのサイト

Single Element CSS Spinners

この他にもコードを利用できるサイトはいろいろあります。

SpinKit

SpinKitのサイト

SpinKit

Epic Spinners

Epic Spinnersのサイト

Epic Spinners

これらのサイトのコードをそのまま使ってもよし、また色などをカスタマイズするのもいいと思います。

jQuery

$(function(){
  //読み込みが完了したら実行する
  $(window).on('load',function(){
    //ローディングアニメーションをフェードアウト
    $('.loader').delay(600).fadeOut(600);
    //背景色をフェードアウト
    $('.loader-bg').delay(900).fadeOut(800);
});

  //ページの読み込みが完了してなくても5秒後にアニメーションを非表示にする
  setTimeout(function(){
    $('.loader-bg').fadeOut(600);
  },5000);
});

「ページ内の全ての要素が読み込まれたら以下の処理を実行する」という指定をするには次のように記述します。

$(window).on('load', function(){
  //　ここに処理内容を記述
});

ここでの処理内容は、①ローディングアニメーションをフェードアウト　②背景色をフェードアウト　と別々に指定しています。

このあたりの調整は実際に数値を変えながらいい具合を探ってください。

時間指定でローディングをフェードアウトさせる

あまりに長いローディング画面はユーザーが離脱してしまう恐れがあるので「setTimeout」を使用します。

これにより「ページの読み込みが完了してなくても5秒後にアニメーションを非表示にする」という指定も追加されます。

setTimeout(function(){
  $('.loader-bg').fadeOut(600);
},5000); //5秒後にfadeOut処理

まとめ

正直今回調べるまでローディング画面の実装は敬遠していました。

ちょっと複雑そう、難しそうだなって。

でも見てきたように案外簡単に実装できます。

CSSアニメーションがちょっと複雑ですが、それもコピペからのカスタマイズでもいいですし、「keyframes」の使い方を理解できれば自作も可能です。

全体の仕組みが理解できればいろんなパターンが作れますので、僕のように敬遠している方はぜひ一度作ってみましょう。

コメントを残すコメントをキャンセル

投稿者トシ