CSSとJavaScriptでローディングアニメーションを実装してみた

バンドやミュージシャンのホームページに特化したWordPressテーマ「zousanrecords」を制作しています太田ヒロシです。

zousanrecordsの先日のアップデートでローディングアニメーションを表示するようにしたのでそのレポートです。

参考にさせていただいたのは以下の記事

CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法

ローディングアニメーションとは？

ローディングアニメーションとは、webサイトを開いたときにページが読み込まれるまで表示されるあのクルクル回るおなじみのやつです↓（最近はいろんなデザインのものがあります）

完成品

zousanrecordsでも今さらですが、実装してみました。

まずは完成したのがこちら↓

サンプル web

header.php

WordPressサイトでトップページ限定にしたかったのでheader.phpのbody直下に以下を追記。

<?php
if( is_front_page() ){
?>
	<div id="loading"><div class="loader">Loading...</div></div>
<?php
}
?>

JavaScript

次にJavaScriptです。ページが読み込まれたらクラス「loaded」が付与されるようになってます。

window.onload = function() {
 const spinner = document.getElementById('loading');
 spinner.classList.add('loaded');
}

CSS

アニメーションはgifなどの画像ではなくcssで実装しました。
Single Element CSS Spinnersというサイトでコピペで持ってこれます。
サイズは自分で調整しました。

// 画面全体に上から被せる
#loading {
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
}

// ページが読み込まれたら非表示
.loaded {
	opacity: 0;
	visibility: hidden;
}

// 以下アニメーションの装飾
.loader,
.loader:after {
	border-radius: 50%;
	width: 6em;
	height: 6em;
}
.loader {
	margin-top: calc(50vh - 30px);
	margin-left: auto;
	margin-right: auto;
	font-size: 10px;
	position: relative;
	text-indent: -9999em;
	border-top: 0.7em solid rgba(53,53,53, 0.2);
	border-right: 0.7em solid rgba(53,53,53, 0.2);
	border-bottom: 0.7em solid rgba(53,53,53, 0.2);
	border-left: 0.7em solid #353535;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load8 1.1s infinite linear;
	animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
 0% {
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
 }
 100% {
	  -webkit-transform: rotate(360deg);
	  transform: rotate(360deg);
 }
}
@keyframes load8 {
 0% {
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
 }
 100% {
	  -webkit-transform: rotate(360deg);
	  transform: rotate(360deg);
 }
}

@media screen and (max-width: 599px) {
	
	.loader {
		margin-top: calc(50vh - 100px);
	}
}

まとめ

意外と簡単でした。もっと早くにやっておけばよかった。

----------------------

バンド、ミュージシャンのホームページ制作をお手伝いしています。「zousanrecords」では無料版も用意しております。

zousanrecords

最近は、ミュージシャンだけでなく広くクリエイターやアーティストに使っていただけるWordPressテーマ、

アーティスト向けHPをWordPressで作ります 用途に合わせてページを追加、カスタマイズにも対応します！ | Webサイト修正・カスタム・コンサル | ココナラ

イベントの特設サイトに使えるWordPressテーマも作ってます。