【JS&CSS】ページ読み込み完了までローディングアイコンを表示する

2024年9月30日

本記事では、以下のようなローディングアイコンを作る方法（CSS）と、ページの読み込みが完了するまでローディングアイコンを表示する方法（JavaScript）を紹介します。

回転する円

複数のドットがリズム良く拡大縮小

不定形プログレスバー

ローディングアイコンの実装コード（HTML / CSS）

CSSのアニメーション（@keyframes）を使うことで、動きのあるローディングアイコンを実装できます。

1. 回転する円

borderを使って円の一部分だけを濃い色にし、その部分を回転させることでローディングアイコンに見せることができます。

<div class="container">
  <div class="spinner"></div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 9999;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid rgba(0, 0, 0, 0.2);
    border-top: 6px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

2. 複数のドットがリズム良く拡大縮小

@keyframesで指定したアニメーションを、異なるタイミングで各ドットに適用することで、連動した動きに見せています。

<div class="container">
    <div class="spinner-2">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 9999;
}

.spinner-2 {
    display: flex;
    gap: 20px;
}

.dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #333;
    animation: bounce 1.2s infinite ease-in-out;
}

.dot:nth-child(1) {
    animation-delay: -0.24s;
}

.dot:nth-child(2) {
    animation-delay: -0.12s;
}

.dot:nth-child(3) {
    animation-delay: 0;
}

@keyframes bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

3. 不定形プログレスバー

@keyframesで指定したアニメーション（プログレスバーが左側から中央に移動し、右側へ流れる）を繰り返します。バーの位置はpositionプロパティで外枠内に収まるようにし、外枠からはみ出た部分はoverflow: hidden;で見えないようにします。

<div class="indeterminate-bar-container">
  <div class="indeterminate-bar"></div>
</div>

.indeterminate-bar-container {
  width: 100%;
  height: 20px;
  background-color: #f3f3f3;
  overflow: hidden;
  border-radius: 5px;
  position: relative;
}

.indeterminate-bar {
  width: 100%;
  height: 100%;
  background-color: #4caf50;
  position: absolute;
  animation: indeterminate 2s infinite;
}

@keyframes indeterminate {
  0% {
    left: -50%; /* アニメーション開始時、バーの左端がコンテナの外側（-50%）に */
    width: 50%;
  }
  50% {
    left: 25%; /* アニメーションの途中でバーが中央付近に移動 */
    width: 50%;
  }
  100% {
    left: 100%; /* 最後にバーがコンテナの右端の外側に移動 */
    width: 50%;
  }
}

決定型プログレスバーの作り方はこちら

【JS&CSS】タスクの進捗状況を示すプログレスバーの実装方法本記事では、以下のようなプログレスバーを作る方法を紹介します。不定型プログレスバー（indeterminate）決定型プログレスバー（determinate） Task 1 Task 2 Task 3…

ページの読み込みが完了するまでローディングアイコンを表示する

そもそもローディングアイコンは、ページがロード中である（フリーズなどしていない）ことをユーザーに知らせる役割があります。特に、たくさんの画像や動画をを読み込む必要があったり、フォーム送信後の処理が必要であったりする場合は、ユーザー体験（UX）の向上に大きく寄与します。

このような「重いページ」を読み込む際にのみローディングアイコンを表示するには、JavaScriptを使って「ページのコンテンツがすべて読み込まれる前にローディングアイコンを表示し、読み込み完了後に非表示にする処理」を追加します。

/* ページが完全に読み込まれた後はローディングアイコンを非表示に */
body.loaded .container {
    display: none;
}

// ページ全体が読み込まれたらローディングアイコンを消す
window.addEventListener('load', function() {
    document.body.classList.add('loaded');
});

ページが読み込まれたらbody要素にloadedクラスが付与され、ローディングアイコンのコンテナ要素にdisplay: none;が適用されることでアイコンが非表示になります。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。