CSSだけで作れる"ちょっと楽しい"ローディングアニメーション11選【初心者向けまとめ】

「HTMLとCSSには慣れてきたのでもっとサイトを豪華にしたい！でもJavaScriptは複雑で難しい．．．」と、こんな経験皆さんあるかと思います。

今回はそんなJavaScriptを一切使わずにCSSだけで実装できるローディングアニメーションを11個紹介します。

CSSだけで作るメリット

CSSのみで実装することで、次のような利点があります。

• 軽量でページの読み込み速度にほとんど影響しない
• 保守性が高く、CSSファイルだけで管理できる
• アクセシビリティを考慮しやすい

1. シンプルなスピナー（基本形）

ベーシックな円形のスピナーです。どんなデザインにも馴染みます。

<div class="loader"></div>

<style>
.loader {
  width: 50px;
  height: 50px;
  border: 4px solid #ddd;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

ポイント
border-top-color だけ色を変えることで回転が見えるようにしています。
animation: spin 1s linear infinite で無限に回り続けます。

2. 円形プログレス（グラデーション）

1.のスピナーにグラデーションを追加したような、滑らかな円形ローディングです。

<div class="spinner-gradient"></div>

<style>
.spinner-gradient {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #3498db 360deg
  );
  animation: rotate 1s linear infinite;
  position: relative;
}

.spinner-gradient::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background-color: white;
  border-radius: 50%;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
</style>

ポイント
conic-gradientを使うことでモダンな円形グラデーションを実現し、
rotate アニメーションで全体を回転させています。
::before で内側の白い円を作り重ねることでリング状に見せています。

3. 二重リングスピナー

2つのリングが逆方向に回転するアニメーションです。

<div class="double-ring">
  <div class="ring-outer"></div>
  <div class="ring-inner"></div>
</div>

<style>
.double-ring {
  position: relative;
  width: 60px;
  height: 60px;
}

.ring-outer, .ring-inner {
  position: absolute;
  border-radius: 50%;
  border: 4px solid transparent;
}

.ring-outer {
  width: 60px;
  height: 60px;
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}

.ring-inner {
  width: 40px;
  height: 40px;
  top: 10px;
  left: 10px;
  border-bottom-color: #e74c3c;
  animation: spin-reverse 0.75s linear infinite;
}

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

@keyframes spin-reverse {
  100% { transform: rotate(-360deg); }
}
</style>

ポイント
2つの円を重ね、spin と spin-reverse の2種類のアニメーション
を適用しています。
回転方向と速度を変えることで、視覚的に面白い動きになり立体感が出ます。
それぞれのリングに異なる色とサイズを設定しています。

4. バー型ローディング（プログレス風）

シンプルで場所を取らないバー型のアニメーションです。

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

<style>
.bar-container {
  width: 200px;
  height: 4px;
  background-color: #f3f3f3;
  border-radius: 2px;
  overflow: hidden;
}

.bar {
  width: 50%;
  height: 100%;
  background-color: #3498db;
  animation: slide 1.5s ease-in-out infinite;
}

@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(300%); /*必要に応じて値を調整してください*/
  }
}
</style>

ポイント
バーが translateX を使って左右に移動します。
親要素にoverflow: hiddenを設定することで、バーが枠からはみ出さずに
左右へ移動します。

5. スライドバー（左右交互）

2本のバーが交互に動くアニメーションです。

<div class="slide-bars">
  <div class="slide-bar bar-1"></div>
  <div class="slide-bar bar-2"></div>
</div>

<style>
.slide-bars {
  width: 100px;
  height: 30px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.slide-bar {
  width: 100%;
  height: 10px;
  background-color: #3498db;
  border-radius: 5px;
}

.bar-1 {
  animation: slide-left 1.5s ease-in-out infinite;
}

.bar-2 {
  animation: slide-right 1.5s ease-in-out infinite;
}

@keyframes slide-left {
  0%, 100% { transform: translateX(50px); }
  50% { transform: translateX(100px); }
}

@keyframes slide-right {
  0%, 100% { transform: translateX(50px); }
  50% { transform: translateX(0px); }
}
</style>

ポイント
上下2つのバーに別々の @keyframes を割り当て、片方は右へ、もう片方は左へ動くように設定しています。
左右に動くバーが交互に動くことで、リズム感のあるアニメーションになります。

6. 3点ドット（バウンス）

チャットアプリなどでよく見かける「入力中」を表現しているようなアニメーションです。

<div class="dots-container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<style>
.dots-container {
  display: flex;
  gap: 10px;
}

.dot {
  width: 15px;
  height: 15px;
  background-color: #3498db;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}

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

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

@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
}
</style>

ポイント
nth-child で開始タイミングをずらし、translateY を使って上下に
バウンドさせています。
animation-delayを使って各ドットの動きをずらすことで、波打つような
自然な動きになります。また、負の値にすることでアニメーションを途中から
開始させています。

7. フェードイン・アウト（点滅）

シンプルな点滅アニメーションです。処理中であることを控えめに伝えたいときなどに使えます。

<div class="spinner-fade"></div>

<style>
.spinner-fade {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  border-radius: 50%;
  animation: fade 1.5s ease-in-out infinite;
}

@keyframes fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.1;
  }
}
</style>

ポイント
opacity を 1 → 0.1 → 1 と変化させるシンプルなアニメーションです。
丸い形は border-radius: 50% で作っています。
ease-in-outを使うことで、滑らかな点滅になります。

8. パルス効果（拡大縮小）

点滅しながら中心から波紋のように広がるアニメーションです。

<div class="spinner-pulse"></div>

<style>
.spinner-pulse {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  border-radius: 50%;
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.2;
  }
}
</style>

ポイント
transform: scale()とopacityを組み合わせることで、滑らかな呼吸するような動きを実現できます。

9. 四角形が回転するスピナー

シンプルながら印象的な四角形の回転アニメーションです。

<div class="spinner-square"></div>

<style>
.spinner-square {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  animation: rotate-square 1.2s ease-in-out infinite;
}

@keyframes rotate-square {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
    border-radius: 50%;
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

ポイント
四角形に rotate を適用し、途中で border-radius を変えて丸く見せています。
四角形が回転しながら円形に変形する動きが面白いアクセントになります。

10. 波紋エフェクト（複数円）

中心から複数の波紋が広がるアニメーションです。

<div class="ripple-container">
  <div class="ripple"></div>
  <div class="ripple"></div>
  <div class="ripple"></div>
</div>

<style>
.ripple-container {
  position: relative;
  width: 80px;
  height: 80px;
}

.ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid #3498db;
  border-radius: 50%;
  animation: ripple-effect 2s ease-out infinite;
}

.ripple:nth-child(2) {
  animation-delay: 0.5s;
}

.ripple:nth-child(3) {
  animation-delay: 1s;
}

@keyframes ripple-effect {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
</style>

ポイント
animation-delay で開始時間をずらしています。
scale と opacity を使って波紋が広がり消えるように見せています。

11. ハートビート（心拍）

心臓の鼓動のようなリズミカルなアニメーションです。

<div class="heartbeat"></div>

<style>
.heartbeat {
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  border-radius: 50%;
  animation: heartbeat 1.3s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.1);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.15);
  }
  40% {
    transform: scale(1);
  }
}
</style>

ポイント
複数のタイミングでscaleを変化させることで、心拍のような2回鼓動する鼓動を表現できます。

カスタマイズのコツ

これらのアニメーションは自由にカスタマイズできます。

色の変更

background-colorやborder-colorを変更すれば、サイトのテーマカラーに合わせられます。

/* ブランドカラーに変更 */
.loader {
  border-top-color: #your-brand-color;
}

速度の調整

animationプロパティの時間を変更することで、アニメーションの速度を調整できます。

/* より速く */
animation: spin 0.5s linear infinite;

/* よりゆっくり */
animation: spin 2s linear infinite;

サイズの変更

widthとheightを変更するだけでサイズを調整できます。

/* 大きくする */
.loader {
  width: 80px;
  height: 80px;
}

/* 小さくする */
.loader {
  width: 30px;
  height: 30px;
}

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

ローディングアニメーションを実装する際は、アクセシビリティにも気を配りましょう。

<div class="loader" role="status" aria-label="読み込み中">
  <span class="sr-only">読み込み中...</span>
</div>

<style>
.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;
}
</style>

スクリーンリーダーを使用しているユーザーにも、ローディング状態が伝わるようにしています。

まとめ

今回紹介したローディングアニメーションは、すべてCSSだけで実装できます。
JavaScriptを使わないため、軽量で保守性も高いのが特徴です。
用途に応じて使い分けてみてください。

色・サイズ・速度を調整するだけで、あなただけのオリジナルローディング
アニメーションが作れます。

ぜひ用途に合わせて使い分けてみてください！

おまけ

パルス効果と波紋エフェクトとハートビートをミックスしてみました。

<!-- 心拍 -->
<div class="ripple-container">
  <div class="ripple"></div>
  <div class="ripple"></div>
  <div class="heartbeat"></div>
  <div class="spinner-pulse"></div>
</div>

<style>
.ripple-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.ripple {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid #e74c3c; /*波紋エフェクトの太さと色*/
  border-radius: 50%;
  animation: ripple-effect 1.3s ease-out infinite;
}

.ripple:nth-child(1) {
  animation-delay: 0.3s;
}

@keyframes ripple-effect {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.heartbeat {
  position: absolute;
  top: 52%;   /*波紋エフェクト border:のpxに合わせて調整する*/
  left: 52%;  /*波紋エフェクト border:のpxに合わせて調整する*/
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: heartbeat 1.3s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  10% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  20% {
    transform: translate(-50%, -50%) scale(1);
  }
  30% {
    transform: translate(-50%, -50%) scale(1.15);
  }
  40% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.spinner-pulse {
  position: absolute;
  width: 52px;
  height: 52px;
  top: 26%;
  left: 26%;
  background-color: #3498db;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 5.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(0.5);
    opacity: 0.3;
  }
  50% {
    transform: scale(3.0);
    opacity: 0.1;
  }
}
</style>

このようにいくつかのアニメーションをミックスしても面白いので
ぜひいろいろ試してみてください！