ページ切り替え時のローディングアニメーションは、CSSでアニメーションの見た目を整えて、JavaScriptで発火のタイミングを指定します。
これらは結構簡単な記述でできます。
そんなローディングアニメーションの作り方について、順に解説していきます。
目次
.classList.add()
JavaScriptの .classList.add() は、要素に対してclassの追加を行うメソッドです。
element.classList.add(クラス名);この記事では、ウィンドウ読み込み時にこのメソッドでclassを付与してローディングアニメーションを表示させます。
もう1回ローディングアニメーションサンプルを見るボタン
早速サンプルですが、既にこのページをご覧いただいた場合には既に表示されたと思います。
ですがもう一回見たい場合用に、以下のボタンで再度見ることができます。
サンプルのコード
コードはHTML・CSS・JavaScriptの3種です。それぞれ順に解説していきます。
HTML
HTMLは以下のような簡素なコードで、これを設置したいページのどこかに設置します。
<div id="loading">
<div class="loader"></div>
</div>HTMLで設置する場所はどこでも大丈夫ですが、極力「頭」の方に記述した方が構文的には正しいと思います。
JavaScript
JavaScriptは、window.onload でウィンドウが読み込まれ始めたタイミングで、.getElementById() で取得したidを持つ要素に .classList.add で「loaded」のclassを付与します。
// ページ読み込み時クラス変更
window.onload = function () {
const spinner = document.getElementById('loading');
spinner.classList.add('loaded');
}動作はこれだけなので、class付与で記述したCSSのアニメーションで動かしていきます。
CSS
CSSは記述量が多少多いですが、大きく分けると「ローディング中のデザイン」と「ローディング中のアニメーション」の2つです。
/* ベースの本体 */
#loading {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: #f0db40;
transition: all 1s;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#loading.loaded {
opacity: 0;
visibility: hidden;
}
/* ローディングアニメーション */
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #545454;
transform: translateZ(0);
animation: loadAnime 1.1s infinite linear;
}
@keyframes loadAnime {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}ローディング中に表示される「円」は、border プロパティで丸を作って、それを @keyframes でグルグルと360°回します。
おまけのJavaScript：ボタンでもう1回アニメーションさせる時
あまり実用的なスニペットじゃありませんが、おまけ的にボタンクリックトリガーのJavaScriptのコードも解説します。
このページで「もう1回アニメーション」のボタンで見る場合、アニメーションがクリック発火します。
ボタンクリック前に window.onload で付与されたclass名を削除してから、もう一回同じclass名を付け直す為にタイマーを設定する setTimeout() のメソッドを使い、再度アニメーションが表示されます。
document.getElementById('loadReload').addEventListener('click', () => {
const spinner = document.getElementById('loading');
spinner.classList.remove('loaded');
setTimeout(function () {
spinner.classList.add('loaded');
}, 2000);
});
このコードでは、2秒後のタイマーで設定しています。
