サイトにアクセスした時に、ページの読み込みが完了するまでローディング画面を表示する方法をご紹介いたします。
デモページを用意したので、動きについてはデモをご参照ください。
サイトの読み込み中にローディング画面を表示する方法
まずは、ローディング画面の準備が必要ですが、今回は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>内に移動してみてください。
あとがき
サイトの読み込みに時間がかかるとユーザーのストレスに繋がりますが、素敵なローディング画面があることで少しは軽減してくれるかもしれません。