【JavaScript】CSSでローディング画面を実装する方法を実例で解説｜動くCSSアニメーションの無料置き場

javascript-prograshi（プロぐらし）-kv JavaScript
記事内に広告が含まれていることがあります。

JavaScriptを使うとローディング画面を実装することができます。

これまでに動画を使って簡単にかっこいいローディング画面を実装する方法や、初回セッションのみローディングのアニメーションを動かす方法を紹介しました。

ここでは、CSSのアニメーションを使った動きのあるローディング画面を紹介します。


（参考1）動画を使ったローディング画面の実装方法

【JavaScript】動画を使ったローディング画面｜超簡単にオシャレなアニメーションを実装する方法

（参考2）初回セッションのみローディング画面を実行する方法

【JavaScript】ローディング画面を初回セッションのみ実行する方法｜sessionStrageとは何か?


完成形

以下のようなCSSローディングアニメーションです。（右下のRerunをクリックすると再ロードします）

See the Pen CSSローディング画面v2 by pro gurashi (@pro-gurashi) on CodePen.


全体の流れは以下になります。

全体の流れ
  1. CSSアイコンを表示
  2. CSSアイコンを非表示にして、テキストを表示
  3. ローディング画面を非表示にする


以下でコードの解説をします。


HTML

  <!-- ローディング -->
  <div class="my-custom-loader" id="my-custom-loader">
    <div class="fulfilling-square-spinner">
      <div class="spinner-inner"></div>
    </div>
    <p class="txt">PROGRASHI</p>
  </div>

  <!-- 本体 -->
  <div class="my-first-view"></div>

HTMLはとてもシンプルです。

ローディング画面の要素として、①くるくる回転して満たされるアイコン、②テキストの２つの要素を設置しています。


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;
  }


  /* ローディング画面 */
  .my-custom-loader{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 400;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .my-custom-loader .txt {
    font-size: 45px;
    font-weight: bold;
    color: #1D3B56;
    display: none;
  }
  .my-custom-loader .fulfilling-square-spinner{
    display: none;
  }



  /* スピンするアイコンのCSS*/
  .fulfilling-square-spinner , .fulfilling-square-spinner * {
    box-sizing: border-box;
  }

  .fulfilling-square-spinner {
    height: 50px;
    width: 50px;
    position: relative;
    border: 4px solid #1D3B56;
    animation: fulfilling-square-spinner-animation 4s infinite ease;
  }

  .fulfilling-square-spinner .spinner-inner {
    vertical-align: top;
    display: inline-block;
    background-color: #1D3B56;
    width: 100%;
    opacity: 1;
    animation: fulfilling-square-spinner-inner-animation 4s infinite ease-in;
  }

  @keyframes fulfilling-square-spinner-animation {
    0% {
      transform: rotate(0deg);
    }

    25% {
      transform: rotate(180deg);
    }

    50% {
      transform: rotate(180deg);
    }

    75% {
      transform: rotate(360deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes fulfilling-square-spinner-inner-animation {
    0% {
      height: 0%;
    }

    25% {
      height: 0%;
    }

    50% {
      height: 100%;
    }

    75% {
      height: 100%;
    }

    100% {
      height: 0%;
    }
  }


ローディングの核となるCSS

CSSは長いですが、長いのはクルクル回るアイコンの部分です。

ローディング画面の核となる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;
  }


  /* ローディング画面 */
  .my-custom-loader{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 400;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .my-custom-loader .txt {
    font-size: 45px;
    font-weight: bold;
    color: #1D3B56;
    display: none;
  }
  .my-custom-loader .fulfilling-square-spinner{
    display: none;
  }


ローディング画面はwidthとheight100%で白色（#fff）の背景にしています。

要素を真ん中に表示したいためflexで上下左右中央寄せにしています。

また、もともとあるWEBサイトの要素の下側に回らないようにz-indexを大きな数値にしておきます。z-index: 400;

また、クルクル回るアイコンとテキストの表示はJavaScriptでコントロールするため、デフォルトは非表示にしておきます（display: none;）


クルクル回るオシャレなCSSアニメーション

ここで使用しているクルクル回るオシャレなCSSアニメーションは、Epic Spinnersというサイトで無料で公開されているものです。


使いたいアイコンをクリックするとコードが表示されます。

CSSで色など基本的な部分を変更すればオリジナルのアニメーションになります。


JavaScript

コード全体像

document.addEventListener('DOMContentLoaded', function() {

  // CSSアニメーションアイコンの表示
  function show_load() {
    const spinner = document.querySelector('#my-custom-loader .fulfilling-square-spinner');
    spinner.style.display = 'block';
    spinner.style.transition = 'opacity 0.4s';
    spinner.style.opacity = '1';
  }


  // CSSアニメーションアイコンを非表示
  function hide_load() {
    const spinner = document.querySelector('#my-custom-loader .fulfilling-square-spinner');
    spinner.style.transition = 'opacity 0.4s';
    spinner.style.opacity = '0';
    setTimeout(function() {
      spinner.style.display = 'none';
    }, 400);
  }


  // テキストを表示
  function show_txt() {
    const txt = document.querySelector('#my-custom-loader .txt');
    txt.style.display = 'block';
    txt.style.transition = 'opacity 0.4s';
    txt.style.opacity = '1';
  }
  


  // ローディング画面を非表示
  function end_loader() {
    document.getElementById('my-custom-loader').style.transition = 'opacity 0.8s';
    document.getElementById('my-custom-loader').style.opacity = '0';
    setTimeout(function() {
      document.getElementById('my-custom-loader').style.display = 'none';
    }, 800);
  }



  window.addEventListener('load', function() {
    // CSSアニメーションを開始
    setTimeout(function() {
      show_load();
    }, 800);
    
    // CSSアニメーションを終了
    setTimeout(function() {
      hide_load();
    }, 3500);
    
    // テキストアニメーションを開始
    setTimeout(function() {
      show_txt();
    }, 4000);
    
    // ローディング画面を非表示
    setTimeout(function() {
      end_loader();
    }, 5000);
  });
});


ローディングの肝となるJavaScriptによる処理です。やりたい動きにあわせて次の4つの関数を用意しています。

4つの関数
  1. CSSアニメーションアイコンの表示： show_load
  2. CSSアニメーションアイコンを非表示：hide_load
  3. テキストを表示： show_txt
  4. ローディング画面を非表示： end_loader


DOMContentLoaded

まずは、画面をロードしたときにロード画面を読み込む処理を実行したいので、addEventListenerメソッドの「DOMContentLoaded」を使います。

「DOMContentLoaded」を指定すると、DOMコンテンツが読み込まれたとき、つまり、HTML要素がすべて読み込まれ、解析された後に実行します。

この基本構文は次のようになっています。

document.addEventListener("DOMContentLoaded", (event) => {});


DOMContentLoadedとは何か？

DOMContentLoadedの詳細については下記をご参考ください。

【JavaScript】addEventListenerのloadとDOMContentLoadedの違いを実例で解説（実行タイミングや用途）


CSSアニメーションアイコンの表示： show_load

CSSアニメーションアイコンの表示する関数として「show_load」を定義しています。

// CSSアニメーションアイコンの表示
  function show_load() {
    const spinner = document.querySelector('#my-custom-loader .fulfilling-square-spinner');
    spinner.style.display = 'block';
    spinner.style.transition = 'opacity 0.4s';
    spinner.style.opacity = '1';
  }

デフォルトではdispalyがnoneになっているので「block」にして表示します。

呼び出されると、0.4秒かけてopacityを1にします。


CSSアニメーションアイコンを非表示：hide_load

CSSアニメーションアイコンがくるりと回ったら、非表示にする関数を「hide_load」として定義しています。

  // CSSアニメーションアイコンを非表示
  function hide_load() {
    const spinner = document.querySelector('#my-custom-loader .fulfilling-square-spinner');
    spinner.style.transition = 'opacity 0.4s';
    spinner.style.opacity = '0';
    setTimeout(function() {
      spinner.style.display = 'none';
    }, 400);
  }

0.4秒かけてopacityを0にします。

opacityが0になったのと同時にdisplay:noneで完全に非表示にします。

Point

transitionをdisplay: noneにかけることはできません。このため、opacityが0になると同時にdisplayをnoneにする処理をしています。


テキストを表示： show_txt

デフォルト非表示になっているテキストを表示する処理を「show_txt」で定義しています。

  // テキストを表示
  function show_txt() {
    const txt = document.querySelector('#my-custom-loader .txt');
    txt.style.display = 'block';
    txt.style.transition = 'opacity 0.4s';
    txt.style.opacity = '1';
  }

デフォルトではdispalyがnoneになっているので「block」にして表示します。

呼び出されると、0.4秒かけてopacityを1にします。


ローディング画面を非表示： end_loader

最後にローディング画面自体を非表示にする処理を「end_loader」で定義します。

  // ローディング画面を非表示
  function end_loader() {
    document.getElementById('my-custom-loader').style.transition = 'opacity 0.8s';
    document.getElementById('my-custom-loader').style.opacity = '0';
    setTimeout(function() {
      document.getElementById('my-custom-loader').style.display = 'none';
    }, 800);
  }

0.8秒かけてopacityを0にし、0になったと同時にdisplayをnoneにします。


setTimeoutで実行タイミングを指定する

関数の定義ができたら、setTimeoutを使って実際にその関数を順番に動かす処理を記述します。

  window.addEventListener('load', function() {
    // CSSアニメーションを開始
    setTimeout(function() {
      show_load();
    }, 800);
    
    // CSSアニメーションを終了
    setTimeout(function() {
      hide_load();
    }, 3500);
    
    // テキストアニメーションを開始
    setTimeout(function() {
      show_txt();
    }, 4000);
    
    // ローディング画面を非表示
    setTimeout(function() {
      end_loader();
    }, 5000);
  });
setTimeoutとは何か？

setTimeoutはかなり便利なメソッドです。遅延時間を指定して、指定したコールバック関数を実行することができます。特にローディングでは必須のメソッドになります。詳細は下記をご参考ください。

【JavaScript】setTimeoutとは何か？使い方を実例で解説（待機や遅延）
Webページをよりインタラクティブで魅力的にしたいと思ったことはありませんか？ボタンを押したらメッセージが表示されたり、アニメーションが滑らかに再生されたり、非同期処理の完了を待ってから次の処理を実行したり…。そんなを実現したいあなたにとっ...
prograshi.com


addEventListenerの「load」はDOMだけでなく、CSSや画像などの外部リソースなどすべての要素を読み込んだあとに実行するイベントリスナーです。

    // CSSアニメーションを開始
    setTimeout(function() {
      show_load();
    }, 800);


ページのロードが終わったら、0.8秒後に「show_load」関数を実行します。show_loadで0.4秒かけてアイコンのアニメーションを表示します。

    // CSSアニメーションを終了
    setTimeout(function() {
      hide_load();
    }, 3500);

CSSのアニメーションがくるりと一周回って、四角が埋まるタイミングに合わせて「hide_load」を実行します。

ここではページロード後3.5秒してから実行しています。（※アニメーションの動きに合わせて適宜調整します）


      // テキストアニメーションを開始
    setTimeout(function() {
      show_txt();
    }, 4000);

ページロード後4秒後にテキストを表示する「show_txt」を実行します。


    // ローディング画面を非表示
    setTimeout(function() {
      end_loader();
    }, 5000);

ページロード後5秒後にローディング画面自体を非表示にする「end_loader」関数を実行します。

「end_loader」は0.8秒かけて非表示になるため、ローディングのアニメーションは全体で5.8秒間となります。



タイトルとURLをコピーしました