【JavaScript】読み込み中のローディング画面をサクッと実装する

こんにちは、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を貼付する */

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

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

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

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

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

window.onload = ()=>{

    const loader = document.getElementById('loader');

    loader.classList.add('loaded');

}

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

最後に

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

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