言語学習

JavaScriptとCSSでローディング（備忘録）

1. ローディングアニメーションとは？

ローディングアニメーションは、ページやコンテンツの読み込み中に表示するアニメーションのこと。
たとえば、スピナーやプログレスバーなどがよく使われます。ユーザーに「今データを読み込んでますよ」という状態を伝えるために便利。

2. 実装の流れ

以下のようなシンプルなローディングアニメーションを作成します。

  1. ページ読み込み時にローディング画面を表示。
  2. ページの読み込みが完了したらローディング画面を非表示に。

3. HTMLの準備

まずは、ローディング画面を表示するためのHTML（適当）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ローディングアニメーション</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- ローディング画面 -->
    <div id="loading">
        <div class="spinner"></div>
    </div>

    <!-- メインコンテンツ -->
    <div id="content" style="display: none;">
        <h1>ページが読み込まれました！</h1>
        <p>ここにメインコンテンツが表示されます。</p>
    </div>

    <script src="script.js"></script>
</body>
</html>

4. CSSでローディングアニメーションを作成

次に、ローディングアニメーションのデザインをCSSで実装。

/* styles.css */

/* 全体の背景を覆うローディング画面 */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* スピナー（回転アニメーション） */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #ccc;
    border-top: 5px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 回転アニメーションの定義 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

5. JavaScriptでローディングの制御

JavaScriptを使って、ページ読み込み完了後にローディング画面を非表示にする

// script.js

// DOMが完全に読み込まれたら実行
window.addEventListener('load', () => {
    const loading = document.getElementById('loading');
    const content = document.getElementById('content');

    // ローディング画面を非表示にしてメインコンテンツを表示
    loading.style.display = 'none';
    content.style.display = 'block';
});

6. コード超要約

  1. HTMLのローディング画面（#loading）
    • ページ全体を覆う固定位置のdiv要素。
    • 中にスピナー（spinner）を配置。
  2. CSSアニメーション（@keyframes spin）
    • スピナーを回転させるアニメーションを設定。
    • transform: rotate()で回転し、animationプロパティで無限ループ。
  3. JavaScriptでの制御
    • ページが完全に読み込まれると、#loadingのdisplayをnoneにして非表示化。
    • 同時にメインコンテンツ（#content）を表示。

7. 実際の動き

  1. ページを開くと、白い背景と青いスピナーが回転する。
  2. ページの読み込みが終わるとローディング画面が消えてメインコンテンツが表示される。

8. 追記（ちょっと改良）

以下の改良を加えるとさらに良い感じになるかも（個人の感性）

  1. フェードアウト効果を追加
    ローディング画面が急に消えるのを防ぐために、CSSトランジションを使ってフェードアウト効果を実装。
#loading {
    opacity: 1;
    transition: opacity 0.5s ease;
}

#loading.hidden {
    opacity: 0;
    pointer-events: none;
}

JavaScriptもちょっと変更

window.addEventListener('load', () => {
    const loading = document.getElementById('loading');
    const content = document.getElementById('content');

    // フェードアウトして非表示に
    loading.classList.add('hidden');
    setTimeout(() => {
        loading.style.display = 'none';
        content.style.display = 'block';
    }, 500); // トランジション時間と合わせる
});

カスタマイズ可能なスピナー
スピナーのデザインを変えたり、テキストを追加して「読み込み中…」などのメッセージを表示。