サイトの読み込み中にローディング画面を表示する方法

サイトの読み込み中にローディング画面を表示する方法

サイトの読み込み中にローディング画面を表示する方法

サイトにアクセスした時に、ページの読み込みが完了するまでローディング画面を表示する方法をご紹介いたします。

デモページを用意したので、動きについてはデモをご参照ください。

デモページを見る

サイトの読み込み中にローディング画面を表示する方法

まずは、ローディング画面の準備が必要ですが、今回はSpinKitというCSSで実装するローディングアニメーションを紹介しているサイトを参考にしました。

Loader Generatorというローディング画像を生成するサービスを使っても良いですし、こういうサービスはたくさんあるので、好きなサービスを利用しましょう。もちろん自前で用意してもOKです。

SpinKitの使い方は非常に簡単で、サイトにアクセスして気に入ったローディングアニメーションがあったら、上部の[Source]をクリックします。HTMLとCSSが表示されるので、それをコピペで使います。

今回は一番シンプルなものを使いました。

<div id="loader">
 <div class="spinner"></div>
</div>

あとで必要なので、予めloaderというIDで包括しておきます。

CSSは以下の通り。

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;
  margin: 300px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}
 
@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
 
@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

これでとりあえずローディング画面用の記述が完了です。

続いて、ページの内容は、以下のようにwrapというIDで包括します。

<div id="wrap">
 <div>ここにページの内容を記述します。</div>
</div>

最後にjQueryを記述して完了です。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
  var winH = $(window).height();
  $('#wrap').css('display','none');
  $('#loader').height(winH).css('display','block');
});

function stopload() {
  $('#wrap').css('display','block');
  $('#loader').delay(600).fadeOut(500);
}

//読み込み完了で実行
$(window).on('load', function() {
  stopload();
});
  
//10秒経過でロード画面強制非表示
$(function(){
  setTimeout('stopload()',10000);
});
</script>

ページを表示する時にまず#wrapを非表示にしておき#loaderを表示、読み込みが完了したら#wrapの内容を表示して#loaderを非表示にするという動作になります。

ローディング画面がフェードアウトする時間などは、「delay(600).fadeOut(500)」の数字を変更して微調整してください。

また、10秒経過したら強制的にローディング画面を非表示にして、コンテンツの画面に移行するようにしています。

全体のソースとしては、以下の通りです。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>サイト読み込み中にローディング画面を表示する</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 
<div id="loader">
 <div class="spinner"></div>
</div><!-- //#loader -->
 
<div id="wrap">
 <div>ここにページの内容を記述します。</div>
</div><!-- //#wrap -->
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
  var winH = $(window).height();
  $('#wrap').css('display','none');
  $('#loader').height(winH).css('display','block');
});

function stopload() {
  $('#wrap').css('display','block');
  $('#loader').delay(600).fadeOut(500);
}

//読み込み完了で実行
$(window).on('load', function() {
  stopload();
});
  
//10秒経過でロード画面強制非表示
$(function(){
  setTimeout('stopload()',10000);
});
</script>
 
</body>
</html>
.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;
  margin: 300px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}
 
@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
 
@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

うまく動かない時は、スクリプトを<head>~</head>内に移動してみてください。

あとがき

サイトの読み込みに時間がかかるとユーザーのストレスに繋がりますが、素敵なローディング画面があることで少しは軽減してくれるかもしれません。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です