最近のWEBサイトはページロード前に短いアニメーションを表示するローディング画面の実装が一般的になってきました。
ローディング画面はCSSとJavaScriptを使って比較的簡単に実装することができます。
ここでは、ローディング画面の実装方法を解説しています。
どんなものが作れるか？
ローディング画面で以下のようなものが作れます。（右下の「Rerun」をクリックしてください。）
See the Pen ローディング画面（Movie） by pro gurashi (@pro-gurashi) on CodePen.
See the Pen ローディング画面１ by pro gurashi (@pro-gurashi) on CodePen.
ここでは、ローディング画面として動画を表示する方法を解説しています。
ローディング画面の実装方法
ローディング画面を実装するには、まず全画面を白や黒などの好きな色で覆い、その中にアニメーションを記述します。なので用意するものは次の３つです。
- HTML
- CSS
- JavaScript
HTMLとCSS
HTMLとCSSの全体像
HTMLとCSSはとてもシンプルです。
<!-- ローディング画面 -->
<div class="my-custom-loader-mov" id="my-custom-loader-mov">
<video autoplay muted playsinline loop width="400px" src="https://prograshi.com/wp-content/uploads/2024/07/e02c92e4f1021c56ee8c3af2999642bb.mp4"></video>
</div>
<!-- ファーストビュー -->
<div class="my-first-view"></div>
<style>
/* ローディング画面終了後のファーストビューのCSS */
.my-first-view{
height: 100vh;
background-image: url(https://prograshi.com/wp-content/uploads/2024/06/image-125.jpg);
background-size: cover;
background-repeat: no-repeat;
}
/* ローディング画面のCSS */
.my-custom-loader-mov{
position: fixed;
width: 100%;
height: 100%;
background-color: black;
z-index: 100;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
</style>ローディング画面のHTMLとCSS
上記の中のローディング画面に該当するHTMLとCSSは以下になります。
<!-- ローディング画面 -->
<div class="my-custom-loader-mov" id="my-custom-loader-mov">
<video autoplay muted playsinline loop width="400px" src="https://prograshi.com/wp-content/uploads/2024/07/e02c92e4f1021c56ee8c3af2999642bb.mp4"></video>
</div>
<style>
/* ローディング画面のCSS */
.my-custom-loader-mov{
position: fixed;
width: 100%;
height: 100%;
background-color: black;
z-index: 100;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
</style>
divタグを使って動画を流しています。最近の動画は解像度やFPS、動画品質などを調整すれば500KBぐらいのとても軽量なものになるので、ローディング画面としてもほぼ問題ありません。
HTMLで動画を埋め込むにはvideoタグを使います。videoタグの詳細は下記をご参考ください。
【videoタグ徹底解説】自動再生、無限ループ、コントロールの表示方法、開始時間の指定や使い方(再生されないときの注意点と対処法)
重要なポイントはCSSの部分です。
.my-custom-loader-mov{
position: fixed;
width: 100%;
height: 100%;
background-color: black;
z-index: 100;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}まず、width: 100%; height: 100%;とすることで、背景を全画面に表示します。色は黒色を指定しています。
スクロールしたときにローディング画面が下に流れないようにposition: fixed;で固定します。また、WEBサイト本体のナビゲーションなどの他の要素の下に回り込まないようにz-indexを上げておきます。
動画などの要素を中心に配置したいので、display: flex; justify-content: center; align-items: center; コンテナの中の要素を上下中央寄せにしています。
JavaScript
ローディング画面の核となるJavaScriptは以下になります。
document.addEventListener('DOMContentLoaded', () => {
// ローディング画面を非表示にする関数
function end_loader() {
const loader = document.getElementById('my-custom-loader-wrapper');
loader.style.transition = 'opacity 0.4s';
loader.style.opacity = '0';
setTimeout(() => {
loader.style.display = 'none';
}, 400);
}
// ローディング画面を終了処理の実行
window.addEventListener('load', () => {
setTimeout(() => {
end_loader();
}, 3000);
});
});DOMContentLoaded：画面ロード時に処理を実行する
まずは、画面をロードしたときにロード画面を読み込む処理を実行したいので、addEventListenerメソッドの「DOMContentLoaded」を使います。
「DOMContentLoaded」を指定すると、DOMコンテンツが読み込まれたとき、つまり、HTML要素がすべて読み込まれ、解析された後に実行します。
この基本構文は次のようになっています。
document.addEventListener("DOMContentLoaded", (event) => {});関数の読み込み（事前処理）
まずは事前準備として、先に関数を読み込んでおきます。
ここでは、ローディング画面に表示している動画を0.4秒かけて非表示にする処理を記述した関数「end_loader」を読み込みます。
// ローダー終了
function end_loader() {
const loader = document.getElementById('my-custom-loader-wrapper');
loader.style.transition = 'opacity 0.4s';
loader.style.opacity = '0';
setTimeout(() => {
loader.style.display = 'none';
}, 400);
}transitionプロパティで、opacityを0.4sかけて変化させるアニメーションを設定します。
0.4秒後にopacityは0に、つまり見えなくなります。完全に見えなくなったらもうローディング画面の要素は必要ないので、display: none;にして完全に非表示にします。
transitionはdispaly:noneに使うことはできません。このため、transitionはopacityに対して使い、opacityが0になったと同時に、display: none;を適用することで、要素を非表示にすることができます。
ローディング画面を終了処理
画面がロードされてから、3秒後にローディング画面の終了処理を実行する関数を発動させるための処理が以下になります。
// ローディング画面を終了処理の実行
window.addEventListener('load', () => {
setTimeout(() => {
end_loader();
}, 3000);
});window.addEventListenerの「load」はCSSや画像などの外部リソースも含めたすべての要素が読み込まれたときに実行するイベントリスナーです。
setTimeoutを使って、ページ全体が読み込まれてから3秒後に、ローディング画面を0.4秒かけて火っ表示にする「end_loader関数」を実行します。
つまり、画面がロードされてから、3.4秒後にローディング画面が終了します。
