jQueryとCSSでページ読み込み時のローディング画面を実装

Webサイトのローディング画面は、ユーザーにページ読み込みが行われていることを伝えやすく、表示までのストレス軽減に役立つのでおすすめです。

今回はCSSアニメーションを利用した簡単なローディング画面を紹介したいと思います。

まずは完成イメージをご確認ください。こんなローディング画面をつくります。

DEMOはこちら

実装方法

以下のHTMLとCSSを用意します。

HTML

<div class="loading">
	<div class="animation"></div>
</div>
<main></main>

CSS

.loading {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0px;
	background: #000;
	z-index: 9999;
}

.animation {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ffffff;
}

テキストだけの簡単なものであれば、あと数行CSSを書き足すだけでいいのですが、少し複雑なものを作る為にこのサイトなどを参考にアニメーションを作り上げていきます。

以下のCSSも用意します。

CSS

.animation,
.animation:before,
.animation:after {
	width: 1em;
	height: 4em;
	background: #ffffff;
	animation: load 1s infinite ease-in-out;
}

.animation:before,
.animation:after {
	position: absolute;
	top: 0;
	content: '';
}

.animation{
	animation-delay: -0.16s;
}

.animation:before {
	left: -1.5em;
	animation-delay: -0.32s;
}

.animation:after {
	left: 1.5em;
}

@keyframes load {
	0%,
	80%,
	100% {
		box-shadow: 0 0;
		height: 4em;
	}
	40% {
		box-shadow: 0 -2em;
		height: 5em;
	}
}

jQuery

$(function(){
	$(window).on('load', function(){
		$('.loading').delay(1500).fadeOut(300);
	});
	function stopload(){
		$('.loading').delay(1000).fadeOut(700);
	}
	setTimeout('stopload()',10000);
});

jQueryの詳細

ではここからはjQueryの内容を1行ずつ説明していきます。

2行目

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

jQuery

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

3行目

delay().とfadeOut()を使い、ローディング画面が消えるタイミングを決めます。

jQuery

$('.loading').delay(1500).fadeOut(300);

5〜8行目

10秒経ってもローディングが終わらない時に、強制的にローディング画面を非表示にします。

jQuery

function stopload(){
	$('.loading').delay(1000).fadeOut(700);
}
setTimeout('stopload()',10000);

まとめ

いかがでしたでしょうか。

今回は割とCSSが複雑なものを作りましたが、テキストや画像だけでも立派なローディング画面はできるので、是非試してみてください。