CSSとJavaScriptでローディングアニメーションを実装してみた
バンドやミュージシャンのホームページに特化したWordPressテーマ「zousanrecords」を制作しています太田ヒロシです。
zousanrecordsの先日のアップデートでローディングアニメーションを表示するようにしたのでそのレポートです。
参考にさせていただいたのは以下の記事
ローディングアニメーションとは？
ローディングアニメーションとは、webサイトを開いたときにページが読み込まれるまで表示されるあのクルクル回るおなじみのやつです↓（最近はいろんなデザインのものがあります）
完成品
zousanrecordsでも今さらですが、実装してみました。
まずは完成したのがこちら↓
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」では無料版も用意しております。
最近は、ミュージシャンだけでなく広くクリエイターやアーティストに使っていただけるWordPressテーマ、
イベントの特設サイトに使えるWordPressテーマも作ってます。