CSSだけで作るローディングアニメーション

このページの目的

画像やJavaScriptを使わずに、CSSの@keyframesとtransformプロパティだけで、ページの読み込み中などを示す「ローディングスピナー」を実装する方法を学びます。
CSSだけで作成することで、サイトのパフォーマンスを損なうことなく、軽量でカスタマイズ性の高いアニメーションを追加できます。

---

smart_display動作サンプル

実際に動作するサンプルです。様々なパターンのローディングアニメーションを確認してみてください。

このサンプルを実装するためのHTMLとCSSのコードは以下の通りです。

---

build実装方法

キーフレームアニメーションを使い、要素を連続的に変形させることで、回転する動きなどを表現します。

1. シンプルなスピナー

円形にした要素の、一部分だけ枠線の色を変え、それをrotateで回転させる最も基本的な方法です。

<!-- HTML -->
<div class="loader-spinner"></div>

<!-- CSS -->
.loader-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #f3f3f3; /* 薄い灰色の円 */
  border-top: 4px solid #3498db; /* 一部分だけ青色に */
  border-radius: 50%; /* 完全な円にする */
  animation: spin 1s linear infinite; /* spinアニメーションを1秒で無限ループ */
}

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

2. 点滅するドット

小さな円を3つ並べ、それぞれに開始時間をずらしたアニメーション（animation-delay）を指定することで、波のように点滅する動きを作ります。

<!-- HTML -->
<div class="loader-dots">
  <div></div>
  <div></div>
  <div></div>
</div>

<!-- CSS -->
.loader-dots div {
  /* ...基本的な円のスタイル... */
  animation: bounce 1.4s infinite ease-in-out both;
}
.loader-dots div:nth-child(1) { animation-delay: -0.32s; }
.loader-dots div:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

---

---