HTML・CSS・JavaScriptでLoadingのアニメーション・Popupを実装する方法

Loading

SHARE

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、HTML・CSS・JavaScriptでLoadingのアニメーション・Popupを実装する方法について解説していきます。

HTML・CSS・JavaScriptでLoadingのアニメーション・Popupを実装する

次のようなLoadingのアニメーション・Popupを実装します。

HTML・CSS・JavaScriptでLoadingのアニメーション・PopupのSampleCode

LoadingのアニメーションCSSは、Single Element CSS Spinners から引用しました。

Loading-Style-Start からLoading-Style-Finish のStyleは、上記Linkのデザインの中から好きなStyleで置換してみてください。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading-Popup🔥</title>
  <style>

    /* Popup-Style-Start */
    #loadingPopup {
      font-family: serif;
      font-size: 16px;
      line-height: 1.6;
      color: #fff;
      /* Default => [ display: none; ] */
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.5);
    }

    .popup-content {
      background-color: #f4f4f4;
      margin: 20% auto;
      width: 50%;
      box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
    }

    .popup-header h1 {
      margin: 1rem 0;
    }

    .popup-header {
      background: lightblue;
      padding: 3px 15px;
      display: flex;
      justify-content: space-between;
    }

    .popup-body {
      padding: 10px 20px;
      color: black;
    }
    /* Popup-Style-Finish */

    /* Loading-Style-Start */
    .loader {
      margin: 100px auto;
      font-size: 25px;
      width: 1em;
      height: 1em;
      border-radius: 50%;
      position: relative;
      text-indent: -9999em;
      -webkit-animation: load5 1.1s infinite ease;
      animation: load5 1.1s infinite ease;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
    }
    @-webkit-keyframes load5 {
      0%,
      100% {
        box-shadow: 0em -2.6em 0em 0em #5f77ec, 1.8em -1.8em 0 0em rgba(95,119,236, 0.2), 2.5em 0em 0 0em rgba(95,119,236, 0.2), 1.75em 1.75em 0 0em rgba(95,119,236, 0.2), 0em 2.5em 0 0em rgba(95,119,236, 0.2), -1.8em 1.8em 0 0em rgba(95,119,236, 0.2), -2.6em 0em 0 0em rgba(95,119,236, 0.5), -1.8em -1.8em 0 0em rgba(95,119,236, 0.7);
      }
      12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.7), 1.8em -1.8em 0 0em #5f77ec, 2.5em 0em 0 0em rgba(95,119,236, 0.2), 1.75em 1.75em 0 0em rgba(95,119,236, 0.2), 0em 2.5em 0 0em rgba(95,119,236, 0.2), -1.8em 1.8em 0 0em rgba(95,119,236, 0.2), -2.6em 0em 0 0em rgba(95,119,236, 0.2), -1.8em -1.8em 0 0em rgba(95,119,236, 0.5);
      }
      25% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.5), 1.8em -1.8em 0 0em rgba(95,119,236, 0.7), 2.5em 0em 0 0em #5f77ec, 1.75em 1.75em 0 0em rgba(95,119,236, 0.2), 0em 2.5em 0 0em rgba(95,119,236, 0.2), -1.8em 1.8em 0 0em rgba(95,119,236, 0.2), -2.6em 0em 0 0em rgba(95,119,236, 0.2), -1.8em -1.8em 0 0em rgba(95,119,236, 0.2);
      }
      37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.2), 1.8em -1.8em 0 0em rgba(95,119,236, 0.5), 2.5em 0em 0 0em rgba(95,119,236, 0.7), 1.75em 1.75em 0 0em #5f77ec, 0em 2.5em 0 0em rgba(95,119,236, 0.2), -1.8em 1.8em 0 0em rgba(95,119,236, 0.2), -2.6em 0em 0 0em rgba(95,119,236, 0.2), -1.8em -1.8em 0 0em rgba(95,119,236, 0.2);
      }
      50% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.2), 1.8em -1.8em 0 0em rgba(95,119,236, 0.2), 2.5em 0em 0 0em rgba(95,119,236, 0.5), 1.75em 1.75em 0 0em rgba(95,119,236, 0.7), 0em 2.5em 0 0em #5f77ec, -1.8em 1.8em 0 0em rgba(95,119,236, 0.2), -2.6em 0em 0 0em rgba(95,119,236, 0.2), -1.8em -1.8em 0 0em rgba(95,119,236, 0.2);
      }
      62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.2), 1.8em -1.8em 0 0em rgba(95,119,236, 0.2), 2.5em 0em 0 0em rgba(95,119,236, 0.2), 1.75em 1.75em 0 0em rgba(95,119,236, 0.5), 0em 2.5em 0 0em rgba(95,119,236, 0.7), -1.8em 1.8em 0 0em #5f77ec, -2.6em 0em 0 0em rgba(95,119,236, 0.2), -1.8em -1.8em 0 0em rgba(95,119,236, 0.2);
      }
      75% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.2), 1.8em -1.8em 0 0em rgba(95,119,236, 0.2), 2.5em 0em 0 0em rgba(95,119,236, 0.2), 1.75em 1.75em 0 0em rgba(95,119,236, 0.2), 0em 2.5em 0 0em rgba(95,119,236, 0.5), -1.8em 1.8em 0 0em rgba(95,119,236, 0.7), -2.6em 0em 0 0em #5f77ec, -1.8em -1.8em 0 0em rgba(95,119,236, 0.2);
      }
      87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.2), 1.8em -1.8em 0 0em rgba(95,119,236, 0.2), 2.5em 0em 0 0em rgba(95,119,236, 0.2), 1.75em 1.75em 0 0em rgba(95,119,236, 0.2), 0em 2.5em 0 0em rgba(95,119,236, 0.2), -1.8em 1.8em 0 0em rgba(95,119,236, 0.5), -2.6em 0em 0 0em rgba(95,119,236, 0.7), -1.8em -1.8em 0 0em #5f77ec;
      }
    }
    @keyframes load5 {
      0%,
      100% {
        box-shadow: 0em -2.6em 0em 0em #5f77ec, 1.8em -1.8em 0 0em rgba(95,119,236, 0.2), 2.5em 0em 0 0em rgba(95,119,236, 0.2), 1.75em 1.75em 0 0em rgba(95,119,236, 0.2), 0em 2.5em 0 0em rgba(95,119,236, 0.2), -1.8em 1.8em 0 0em rgba(95,119,236, 0.2), -2.6em 0em 0 0em rgba(95,119,236, 0.5), -1.8em -1.8em 0 0em rgba(95,119,236, 0.7);
      }
      12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.7), 1.8em -1.8em 0 0em #5f77ec, 2.5em 0em 0 0em rgba(95,119,236, 0.2), 1.75em 1.75em 0 0em rgba(95,119,236, 0.2), 0em 2.5em 0 0em rgba(95,119,236, 0.2), -1.8em 1.8em 0 0em rgba(95,119,236, 0.2), -2.6em 0em 0 0em rgba(95,119,236, 0.2), -1.8em -1.8em 0 0em rgba(95,119,236, 0.5);
      }
      25% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.5), 1.8em -1.8em 0 0em rgba(95,119,236, 0.7), 2.5em 0em 0 0em #5f77ec, 1.75em 1.75em 0 0em rgba(95,119,236, 0.2), 0em 2.5em 0 0em rgba(95,119,236, 0.2), -1.8em 1.8em 0 0em rgba(95,119,236, 0.2), -2.6em 0em 0 0em rgba(95,119,236, 0.2), -1.8em -1.8em 0 0em rgba(95,119,236, 0.2);
      }
      37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.2), 1.8em -1.8em 0 0em rgba(95,119,236, 0.5), 2.5em 0em 0 0em rgba(95,119,236, 0.7), 1.75em 1.75em 0 0em #5f77ec, 0em 2.5em 0 0em rgba(95,119,236, 0.2), -1.8em 1.8em 0 0em rgba(95,119,236, 0.2), -2.6em 0em 0 0em rgba(95,119,236, 0.2), -1.8em -1.8em 0 0em rgba(95,119,236, 0.2);
      }
      50% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.2), 1.8em -1.8em 0 0em rgba(95,119,236, 0.2), 2.5em 0em 0 0em rgba(95,119,236, 0.5), 1.75em 1.75em 0 0em rgba(95,119,236, 0.7), 0em 2.5em 0 0em #5f77ec, -1.8em 1.8em 0 0em rgba(95,119,236, 0.2), -2.6em 0em 0 0em rgba(95,119,236, 0.2), -1.8em -1.8em 0 0em rgba(95,119,236, 0.2);
      }
      62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.2), 1.8em -1.8em 0 0em rgba(95,119,236, 0.2), 2.5em 0em 0 0em rgba(95,119,236, 0.2), 1.75em 1.75em 0 0em rgba(95,119,236, 0.5), 0em 2.5em 0 0em rgba(95,119,236, 0.7), -1.8em 1.8em 0 0em #5f77ec, -2.6em 0em 0 0em rgba(95,119,236, 0.2), -1.8em -1.8em 0 0em rgba(95,119,236, 0.2);
      }
      75% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.2), 1.8em -1.8em 0 0em rgba(95,119,236, 0.2), 2.5em 0em 0 0em rgba(95,119,236, 0.2), 1.75em 1.75em 0 0em rgba(95,119,236, 0.2), 0em 2.5em 0 0em rgba(95,119,236, 0.5), -1.8em 1.8em 0 0em rgba(95,119,236, 0.7), -2.6em 0em 0 0em #5f77ec, -1.8em -1.8em 0 0em rgba(95,119,236, 0.2);
      }
      87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(95,119,236, 0.2), 1.8em -1.8em 0 0em rgba(95,119,236, 0.2), 2.5em 0em 0 0em rgba(95,119,236, 0.2), 1.75em 1.75em 0 0em rgba(95,119,236, 0.2), 0em 2.5em 0 0em rgba(95,119,236, 0.2), -1.8em 1.8em 0 0em rgba(95,119,236, 0.5), -2.6em 0em 0 0em rgba(95,119,236, 0.7), -1.8em -1.8em 0 0em #5f77ec;
      }
    }
    /* Loading-Style-Finish */
  </style>
</head>
<body>

  <!-- LoaingPopup -->
  <div id="loadingPopup">
    <div class="popup-content">
      <div class="popup-header">
        <h1>Now Loading... </h1>
      </div>

      <div class="popup-body">
        <div class="contents">
          <div class="loader"></div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- TodoListを表示する -->
  <ol id="todos"></ol>

  <script type='text/javascript'>
    // JSONPlaceHolderから TodoDataをFetchする処理
    let todoData = null;
    ( async ()=> {
      try {
        let res = await fetch('https://jsonplaceholder.typicode.com/todos/');
        console.log(res);
        todoData = await res.json();
        console.log(todoData);
      } catch (error) {
        console.log(error);
      } finally {
        setTimeout( 
          async () => {
            // Load、完了後の処理
            const todos = document.getElementById('todos');
            todoData.forEach((todo, idx) => {
              const li = document.createElement('li');
              li.setAttribute('id', todo.id);
              li.innerText = todo.title;
              todos.appendChild(li);
            });
            PopupClose();
        }, 5000);
      }
    })();

    // Popup全体のHTML-Element
    const popup = document.getElementById('loadingPopup');

    // PopupをDisplayするFucntion
    function PopupDisplay() {
        popup.style.display = 'block';
    };

    // Popupを閉じるFunction
    function PopupClose() {
        popup.style.display = 'none';
    };
    
    PopupDisplay();
  </script>
</body>
</html>

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

Twitterやってます！Follow Me！

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！

最近の投稿

【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 JS_uuid JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) py_csv_to_json PythonでCSVをJSONに変換する方法 py_csv_cut PythonでCSV・Dataframeを指定の行数まで切り取る方法 js_for_of JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 Python_VSCode VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法

前の記事

setTimeout_sleep
JavaScriptで指定時間、処理を待機する方法(sleep…

次の記事

Nodeで「Npm Error – No matc…
Node_npm_error