こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで読み込み中のローディング画面をサクッと実装する方法をご紹介しています。

読み込み中のローディング画面を簡単に作りたいんだけど、良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

作成するローディング画面

本記事で作成するローディング画面のサンプルです。「Run Pen」をクリックするとローディング画面が表示されます。

See the Pen
6180
by ryohei (@intotheprogram)
on CodePen.

上記のサンプルでは空白のページを読み込んでいるためローディング時間は短いですが、ページに実装する場合は文書の読み込み時間も含まれます。そのためもう少し長い間ローディング画面が表示されるかと思います。

ローディングが終わった後はローディング画面をフェードアウトするアニメーションを設定しています。この辺の時間も好きに設定することができます。

サンプルも見ていただいたことですし、さっそく作成方法を見ていきましょう!

SpinKitから好きなアニメーションを選択する

まずはローディング画面に表示する動くアイコンを選びます。紹介しているサイトは沢山ありますが、今回はHTMLとCSSだけで利用することができる下記のサイトのものを利用します。

上記のリンクを開くとスライド形式でローディングアニメーションのサンプルが表示されています。好きなものを選択し、ページ上部にある「Source」のリンクをクリックすると、ローディングアニメーションのHTMLとCSSを取得することができます。次項で使用しますのでコピーしておきましょう。

ローディング画面のHTMLを設置する

続いてローディング画面で使用するアイコンなどを設置していきます。

前項で取得したHTMLをラップする形でHTMLを追加します。id名はloaderとしていますが、任意のものに変更していただいて大丈夫です。その場合は以降に登場するloaderの部分も変更していただければと思います。

<div id="loader">
<div class="spinner">
<div class="cube1"></div>
<div class="cube2"></div>
</div>
</div>

以上でローディング画面のHTMLの設置は完了です。続いてローディング画面を非表示にするアニメーションを作成していきます。

ローディング画面を非表示にするアニメーションを作成する

ローディング画面を非表示にするアニメーションを作成していきます。

本記事では、ローディング画面を非表示にするアニメーションはフェードアウトする形で作成しています。

@keyframes fadeOut {
from {
opacity: 1;
}
to {
display: none;
opacity: 0;
z-index: -1;
}
}

#loader {
width: 100%;
height: 100vh;
background-color: #00c2bc;
/* 環境によって「z-index」追加 */
}

/* 読み込み完了後に「loaded」を付与する */
#loader.loaded {
animation: fadeOut 3s forwards;
}

/* 以降「SpinKit」で選んだアニメーションのCSSを貼付する */

アニメーションは好きに変更していただいて大丈夫です。ページの読み込み完了後にidloaderの要素に「loaded」を付与することでローディング画面を非表示にします。その点だけご認識いただければと思います!

ここまででHTMLやCSSの準備は完了です。最後にページ読み込みが完了した際にclassを付与するスクリプトを作成してローディング画面を完成させましょう!

ページ読み込み完了後にローダーを非表示にするclassを付与する

ではページ読み込み完了後にローダーを非表示にするclassを付与する処理を作成していきます。

といっても特に難しいことはしていません。ページの読み込みが完了するとidloaderの要素を取得して、loadedclassを付与する処理を実行するだけです。

window.onload = ()=>{
const loader = document.getElementById('loader');
loader.classList.add('loaded');
}

以上でローディング画面の作成は完了です!お疲れ様でした!

最後に

最近ではページの読み込みスピードを優先してサイト制作をすることが多いですが、SEOを気にしないでよかったり、グラフィカルなサイトを作りたいといった理由でローディング画面の実装を希望される方は結構います。基本的な作り方を知っておくと色々と応用が利きますので、ぜひ本記事の内容を足掛かりに見た目に素晴らしいローディング画面を作成してみてくださいね!

以上、JavaScriptで読み込み中のローディング画面をサクッと実装する方法のご紹介でした!