目次（クリックでジャンプ）
シンプルなローディング画面の実装
- 白背景+ローディングアイコンのシンプルなローディング
- ページ読み込みが終わるとローディングが消える
- 10秒経過で自動的にローディングが消える
- ヒートマップツール（Clarity）でも正しく表示
ページの読み込み終了後に非表示になる、シンプルかつ汎用的なローディング画面です。
一生ローディングが終わらないなどの万が一の事態を避ける為、10秒経過で強制的に非表示になるようにしています。
ヒートマップツール（Clarity）でローディング画面が消えずに表示されてしまう等のケースがありますが、こちらのコードはそのような問題もありません。
HTML
<div class="js_curtain">
<img class="js_curtain_loading" src="https://kizineko.com/wp-content/themes/swell_child/assets/img/loading.gif" alt="">
</div>上記のコードを、ローディング画面を表示したいページの出来るだけ上部へ差し込んでください。
imgのsrc部分は、ローディングアイコン（GIFまたはSVG）のパスを設定してください。
ローディングアイコン（GIF）のおすすめ
ローディングアイコンはGIF画像を使用しています。
ローディングGIFは以下のサイトで簡単に作成できるため、適宜好きなローディングGIFやSVGを用意してください。
または、以下のサイトで既存のGIFをダウンロード（フリー）することもおすすめです。
CSS（SCSS）
.js {
&_curtain {
width: 100vw;
height: 100vh;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
&_loading {
width: 10rem;
height: 10rem;
}
}
}Javascript
function loadingAnimation() {
window.addEventListener('load', function() {
//ページ読み込み終了で非表示
document.querySelector(".js_curtain").style.display = "none";
});
document.addEventListener("DOMContentLoaded", function() {
//10秒経過で強制的に非表示
setTimeout(function(){ document.querySelector(".js_curtain").style.display = "none"},10000);
});
}
loadingAnimation();シンプルなローディング画面の実装 まとめ
上記のコードのコピペで簡単にローディング画面が実装できます。
適宜アイコンやCSSなど、カスタマイズして使用してみてください。
