ローディング画面とは

ページの読み込み直後に全画面で表示され、数秒後にフェードアウトして本文が現れる演出。

概要

ページを開いた直後、コンテンツの代わりに全画面で表示される演出です。ロゴや簡単な図形、スピナーなどを表示しておき、一定時間が経つとフェードアウトして、後ろに用意していた本文が現れます。読み込みに時間がかかるサイトで待ち時間を印象づけるために使われますが、過剰に使うと読者を待たせるだけになるため、実際の読み込み時間と演出の長さを近づけるのが望ましいとされています。

別名

表記ゆれ：ローディング画面、スプラッシュ、ローディングページ、オープニング、loading screen、splash screen

アプリの起動画面を指す「スプラッシュ画面」という呼び方が、Web サイトの演出にも転用されています。

AI への伝え方

「最初にローディング画面を出して、数秒後にフェードアウトさせて」で通じます。何秒表示するか、実際の読み込み完了に合わせて消すか固定時間で消すかを伝えると仕様がぶれません。

似たパーツとの違い

「ローディングスピナー」は画面の一部やボタンの中など、部分的な待ち状態を示すのに対し、ローディング画面は画面全体を覆う点が異なります。ローディングスピナーは、このローディング画面の中の要素として使われることもあります。

デモ

コード

HTML

<div class="loading-screen-demo">
  <div class="loading-screen-demo__overlay" id="loading-screen-demo-overlay">
    <div class="loading-screen-demo__mark" aria-hidden="true"></div>
    <div class="loading-screen-demo__spinner" aria-hidden="true"></div>
    <p class="loading-screen-demo__label">読み込み中…</p>
  </div>
  <main class="loading-screen-demo__body">
    <p>本文が表示されました。ローディング画面は 2 秒後に自動的にフェードアウトします。</p>
    <button type="button" class="loading-screen-demo__replay" id="loading-screen-demo-replay">
      もう一度見る
    </button>
  </main>
</div>

CSS

.loading-screen-demo {
  position: relative;
  font-family: sans-serif;
}

.loading-screen-demo__overlay {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #0017c1;
  color: #fff;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 100;
}

/* opacity で制御するので display は変更しない(display: none を使うと
   フェードアウトの transition が働かないため、hidden 属性は使わない) */
.loading-screen-demo__overlay--hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-screen-demo__mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
}

.loading-screen-demo__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: loading-screen-demo-spin 0.8s linear infinite;
}

.loading-screen-demo__label {
  margin: 0;
  font-size: 13px;
}

@keyframes loading-screen-demo-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-screen-demo__spinner {
    animation: none;
  }
  .loading-screen-demo__overlay {
    transition: none;
  }
}

.loading-screen-demo__body {
  padding: 24px;
  color: #333333;
  line-height: 1.8;
}

.loading-screen-demo__body p {
  margin: 0 0 16px;
}

.loading-screen-demo__replay {
  padding: 8px 18px;
  border: 1px solid #0017c1;
  border-radius: 8px;
  background: #fff;
  color: #0017c1;
  font-size: 13px;
  cursor: pointer;
}

.loading-screen-demo__replay:hover {
  background: #f2f2f2;
}

const overlay = document.getElementById("loading-screen-demo-overlay");
const replayButton = document.getElementById("loading-screen-demo-replay");
let timer;

function play() {
  clearTimeout(timer);
  overlay.classList.remove("loading-screen-demo__overlay--hidden");
  timer = setTimeout(() => {
    overlay.classList.add("loading-screen-demo__overlay--hidden");
  }, 2000);
}

replayButton.addEventListener("click", play);

play();