【JavaScript】ローディング画面をアニメーションで作成する方法

はじめに
フォルダ構成
loading画面作成
実行確認
最後に

はじめに

今回は、JavaScriptとCSSを使ってシンプルなローディング画面のアニメーションを作成する方法を記載していきたいと思います。ページの読み込み中にユーザーの注目を集めたり、読み込み完了を知らせるためにローディングアニメーションは非常に有効です。

フォルダ構成

今回紹介するソースのフォルダ構成を記載します。

project-root
│  index.html
│  loading.html
├─css
│      loading.css
└─js
        loading.js

loading画面作成

loading.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>サンプル</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/loading.css" />
    <script src="js/loading.js" defer></script>
</head>

<body class="chapter-10">
    <div class="loading">
        <p class="loading-text">Loading...</p>
        <div class="spinner"></div>
    </div>
</body>

</html>

loading.js

ローディングイベントを作成しその中に実行したい処理を記載する。

// ページの読み込み処理
window.addEventListener("load", () => {
  // 3秒後にサイトを表示する
  setTimeout(() => {
    window.location.href = "https://selifemorizo.com/";
  }, 3000);
});

loading.css

「CSS Animations」を使用して、Loadingの動作を作成します。

/* 背景のcsを設定 */
.loading {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* 文字のcssを設定 */
.loading-text {
  color: #090000;
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;
}

.spinner {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid #FFF;
  border-left-color: #1082ce; 
  animation: spinner-rotation 1s linear infinite;
}

/* アニメーションの設定 */
@keyframes spinner-rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

実行確認

このローディング画面は、3秒後にサイトに移動する画面となっています。

最後に

JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript

以上、ログになります。
これからも継続していきましょう！！