CSSだけでOK！モダンなローディングアニメーション8選

Webサイトやアプリを作っていると、「ローディング中」の表現が必要になるシーンは多々あります。

2025年の最新トレンドでは、GPUアクセラレーションを活用した軽量なアニメーションが主流になっており、transformとopacityプロパティを使うことでブラウザのGPUで処理されるため滑らかに動作します。

今回は、幾何学的な形状やグローイングエフェクトなど、2025年のモダンなデザイントレンドを反映したコピペですぐ使える8種類のローディングアニメーションを、初心者の方にもわかりやすく解説します。

CSSだけで作るメリット

CSSアニメーションには、こんなメリットがあります。

• 軽量でページの読み込み速度に影響しない
• JavaScriptが無効な環境でも動作する
• transformとopacityプロパティを使えばGPUで処理されるため、滑らかに動く
• メンテナンスが簡単
• コード量が少なくて済む

それでは早速、実際のコードを見ていきましょう！

1. グラデーション・パルス

グローイングエフェクトを使った、モダンで洗練されたデザインです。中心から光が広がるような演出が特徴的です。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

<div class="box">
  <div class="gradient-pulse"></div>
</div>

.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gradient-pulse {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  position: relative;
  animation: pulse-glow 2s ease-in-out infinite;
}

.gradient-pulse::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  filter: blur(20px);
  opacity: 0.7;
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

ポイントは::before疑似要素で光のエフェクトを作り、filter: blur()でグロー効果を実現している点です。グラデーションカラーは自由にカスタマイズできます。

2. ネオンリング・スピナー

ネオンライトのように光る、サイバーパンク風のスピナーです。ダークモードのUIに最適です。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

<div class="box">
  <div class="neon-ring"></div>
</div>

.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0a0e27;
}

.neon-ring {
  width: 100px;
  height: 100px;
  border: 4px solid transparent;
  border-radius: 50%;
  border-top-color: #0ff;
  border-right-color: #0ff;
  position: relative;
  animation: spin 1.5s linear infinite;
  filter: drop-shadow(0 0 10px #0ff) drop-shadow(0 0 20px #0ff);
}

.neon-ring::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: #f0f;
  border-left-color: #f0f;
  animation: spin 1s linear infinite reverse;
  filter: drop-shadow(0 0 10px #f0f) drop-shadow(0 0 20px #f0f);
}

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

drop-shadow()を使うことでネオンのような発光効果を演出しています。内側と外側で逆回転させることで、より複雑な動きを実現しています。

カスタマイズのヒント

色を変えれば、様々なテーマカラーに対応できます。シアン（#0ff）とマゼンタ（#f0f）の組み合わせは、2025年のトレンドカラーです。

3. 幾何学的モーフィング

幾何学的な形状は2025年のウェブデザインで広く使われているトレンドです。正方形が円形に変化する、視覚的に面白いアニメーションです。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

<div class="box">
  <div class="geometric-morph"></div>
</div>

.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom right, #ff6b6b, #4ecdc4);
}

.geometric-morph {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #feca57, #ff6b6b);
  position: relative;
  animation: morph 3s ease-in-out infinite;
}

@keyframes morph {
  0%, 100% {
    border-radius: 20%;
    transform: rotate(0deg) scale(1);
  }
  25% {
    border-radius: 50%;
    transform: rotate(90deg) scale(0.9);
  }
  50% {
    border-radius: 5%;
    transform: rotate(180deg) scale(1.1);
  }
  75% {
    border-radius: 50%;
    transform: rotate(270deg) scale(0.9);
  }
}

border-radiusを動的に変化させることで、形状がなめらかに変形します。回転とスケールを組み合わせることで、より有機的な動きになります。

4. 液体ローディング（Liquid Loader）

液体が波打つような、流動的なアニメーションです。オーガニックなデザインに最適です。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

<div class="box">
  <div class="liquid-loader">
    <div class="liquid-wave"></div>
  </div>
</div>

.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.liquid-loader {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.liquid-wave {
  position: absolute;
  bottom: -150%;
  left: -25%;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  border-radius: 45%;
  animation: wave-fill 3s ease-in-out infinite, wave-move 4s linear infinite;
}

.liquid-wave::before {
  content: '';
  position: absolute;
  top: -28%;
  left: -25%;
  width: 170%;
  height: 170%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));
  border-radius: 47%;
  animation: wave-fill 8s ease-in-out infinite reverse, wave-move 12s linear infinite;
}

.liquid-wave::after {
  content: '';
  position: absolute;
  top: -30%;
  left: -35%;
  width: 170%;
  height: 170%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
  border-radius: 48%;
  animation: wave-fill 15s ease-in-out infinite, wave-move 16s linear infinite;
}

@keyframes wave-fill {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.05);
  }
}

@keyframes wave-move {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

backdrop-filter: blur()でガラスのような質感を出し、楕円形を回転させることで波の動きを表現しています。

注意点

backdrop-filterは一部の古いブラウザではサポートされていない可能性があります。重要なコンテンツには代替デザインを用意しましょう。

5. オービタル（Orbital）ドット

複数の点が軌道を描いて回転する、宇宙的なアニメーションです。

ライトモードでもダークモードでも見栄えがよく、イチオシのアニメーション！

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

<div class="box">
  <div class="orbital">
    <div class="orbit orbit-1">
      <div class="dot"></div>
    </div>
    <div class="orbit orbit-2">
      <div class="dot"></div>
    </div>
    <div class="orbit orbit-3">
      <div class="dot"></div>
    </div>
  </div>
</div>

.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a1a2e;
}

.orbital {
  width: 150px;
  height: 150px;
  position: relative;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: rotate 3s linear infinite;
}

.orbit-1 {
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  animation-duration: 2s;
}

.orbit-2 {
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  animation-duration: 3s;
}

.orbit-3 {
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  animation-duration: 4s;
}

.dot {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -6px;
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
}

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

各軌道のanimation-durationを変えることで、それぞれ異なる速度で回転し、複雑な動きを生み出しています。

6. グリッチ・スピナー

デジタルグリッチエフェクトを使った、テクノロジー感のあるローディングです。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

<div class="box">
  <div class="glitch-spinner">
    <div class="glitch-bar"></div>
    <div class="glitch-bar"></div>
    <div class="glitch-bar"></div>
    <div class="glitch-bar"></div>
    <div class="glitch-bar"></div>
  </div>
</div>

.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0f0f0f;
}

.glitch-spinner {
  width: 100px;
  height: 100px;
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
}

.glitch-bar {
  width: 12px;
  height: 60px;
  background: linear-gradient(to bottom, #00ff41, #00ff41 50%, transparent 50%);
  animation: glitch 1.5s ease-in-out infinite;
  filter: drop-shadow(0 0 5px #00ff41);
}

.glitch-bar:nth-child(1) {
  animation-delay: 0s;
}

.glitch-bar:nth-child(2) {
  animation-delay: 0.1s;
}

.glitch-bar:nth-child(3) {
  animation-delay: 0.2s;
}

.glitch-bar:nth-child(4) {
  animation-delay: 0.3s;
}

.glitch-bar:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes glitch {
  0%, 100% {
    height: 60px;
    opacity: 1;
  }
  25% {
    height: 20px;
    opacity: 0.5;
    transform: translateY(-5px);
  }
  50% {
    height: 80px;
    opacity: 1;
  }
  75% {
    height: 40px;
    opacity: 0.7;
    transform: translateY(5px);
  }
}

ランダムな高さの変化と不規則な動きで、グリッチエフェクトを表現しています。サイバーセキュリティやテック系のサイトに最適です。

7. パルス + フォーカスリング

パルスの周囲を囲む半円が特徴です。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

  <div class="box">
    <div class="loader-container">
      <div class="outer-ring"></div>
      <div class="middle-ring"></div>
      <div class="inner-pulse"></div>
      <div class="center-dots">
        <div class="dot"></div>
      </div>
    </div>
  </div>

.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  overflow: hidden;
}
.loader-container {
  position: relative;
  width: 200px;
  height: 200px;
}
.outer-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: #00f2fe;
  border-right-color: #4facfe;
  border-radius: 50%;
  animation: rotate 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.middle-ring {
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  border: 3px solid transparent;
  border-bottom-color: #f093fb;
  border-left-color: #f5576c;
  border-radius: 50%;
  animation: rotate-reverse 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.inner-pulse {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.3), transparent);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
.center-dots {
  position: absolute;
  width: 40%;
  height: 40%;
  top: 50%;
  left: 30.5%;
}
.dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8),
              0 0 30px rgba(0, 242, 254, 0.6);
  animation: dot-dance 1.5s ease-in-out infinite;
}
.dot:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0s;
}
.dot:nth-child(2) {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  animation-delay: 0.2s;
}
.dot:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0.4s;
}
.dot:nth-child(4) {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation-delay: 0.6s;
}
/* アニメーション定義 */
@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
@keyframes rotate-reverse {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(-180deg) scale(0.9);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}
@keyframes dot-dance {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.6;
  }
}
/* グロー効果 */
.outer-ring::after,
.middle-ring::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 254, 0.1), transparent);
  filter: blur(20px);
  z-index: -1;
}

8. グラデーションボタン

横長のボタン形状を取り囲むボーダーが、滑らかに回転する美しいアニメーションです。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

<div class="box">
  <div class="wave-gradient">
    <span></span>
  </div>
</div>

.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1a1a2e;
}

.wave-gradient {
  width: 200px;
  height: 80px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.wave-gradient::before {
  content: '';
  position: absolute;
  width: 400%;
  height: 400%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #667eea 90deg,
    #764ba2 180deg,
    #f093fb 270deg,
    transparent 360deg
  );
  animation: wave-rotate 4s linear infinite;
}

.wave-gradient::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: #1a1a2e;
  border-radius: 36px;
}

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

パフォーマンスの最適化について

CSSアニメーションを使う際は、パフォーマンスに注意が必要です。以下のポイントを押さえましょう。

GPU アクセラレーションを活用する

transformとopacityのプロパティはGPUで処理されるため、これらを優先的に使うことで滑らかなアニメーションが実現できます。

避けるべきプロパティ（レイアウトの再計算が発生する）

• width、height
• top、left、right、bottom（translateを使う）
• margin、padding

推奨されるプロパティ

• transform（translate、rotate、scaleなど）
• opacity

will-change プロパティの活用

アニメーションさせる要素にwill-changeを指定することで、ブラウザに最適化のヒントを与えられます。

.spinner {
  will-change: transform;
}

ただし、多用は禁物です。必要な要素にのみ使用しましょう。使いすぎるとかえってパフォーマンスが悪化します。

実装時の注意点

アクセシビリティへの配慮

ローディングアニメーションには、スクリーンリーダーユーザーのために適切なARIA属性を追加しましょう。

<div class="box">
  <div class="spinner" role="status" aria-live="polite">
    <span class="sr-only">読み込み中...</span>
  </div>
</div>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

ローディング時間が長い場合

読み込みに時間がかかる場合は、アニメーションだけでなく、プログレスバーや残り時間の表示を併用することをおすすめします。ユーザーに進行状況を伝えることが大切です。

ブラウザ互換性

今回紹介したアニメーションは、すべて主要なモダンブラウザで動作します。ただし、一部の効果（backdrop-filterなど）は古いブラウザではサポートされていない可能性があります。

/* フォールバック例 */
.liquid-loader {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

/* backdrop-filterが使えない場合 */
@supports not (backdrop-filter: blur(10px)) {
  .liquid-loader {
    background: rgba(255, 255, 255, 0.5);
  }
}

まとめ

今回は、デザイントレンドを反映した、幾何学的デザインやグローイングエフェクトを使ったモダンなローディングアニメーションを8種類紹介しました。

これらのコードはすべてコピペで使えますが、自分のプロジェクトに合わせて色やサイズ、速度をカスタマイズしてみてください。

CSSアニメーションの可能性は無限大。基本を押さえたら、オリジナルのアニメーションに挑戦してみるのも楽しいのでおすすめです。