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

本記事では、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で読み込み中のローディング画面をサクッと実装する方法のご紹介でした！