超簡単 javascriptとcssで作る簡易ローディング画面

簡易ローディング画面を、javascriptとcssで、jQueryなしでつくりました。

仕組は超簡単。

html

<!-- ローディング用 -->
<div id="loading">
	<img src="img/loading.gif" alt="loading">
</div>
<!-- コンテンツ -->
<div id="contents" class="hidden">
	<img src="img/img01.jpg" alt="">
	<img src="img/img02.jpg" alt="">
	<img src="img/img03.jpg" alt="">
	<img src="img/img04.jpg" alt="">
	<img src="img/img05.jpg" alt="">
	<img src="img/img06.jpg" alt="">
	<img src="img/img07.jpg" alt="">
	<img src="img/img08.jpg" alt="">
</div>

ローディング時に見せる画面を
<div id=”loading”></div>
で用意。
GIFアニメでローディングの画像を用意しました。

ローディング完了したら表示するコンテンツを
<div id=”contents”></div>
で用意しました。
あらかじめ非表示にするので、hiddenというクラスをつけています。

css

#loading {
	width: 100%;
	height: 100vh;
	background-color: #fff;
	position: relative;
}
#loading img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.hidden {
	display: none;
}

ローディング画面は、画面いっぱいの白背景に、真ん中にGIFアニメ。

コンテンツを非表示にしておく、クラスhiddenはdisplay: none;としました。

javascript

// loadingのdivを取得
var loading = document.getElementById('loading');
// contentsのdivを取得
var contents = document.getElementById('contents');

// 読み込みが完了したら
window.addEventListener('load', function () {
	// loadingのdivを非表示に
	loading.style.display = 'none';
	// contentsのdivを表示
	contents.classList.remove('hidden');
});

window.addEventListener(‘load’, function　〜
を使用して、ページの読み込みが完了したら、
loadingのdivにdisplay: none;を追加して非表示に、
contentsのdivを非表示にしていたhiddenクラスを削除して表示。

デモ

デモはこちら