カテゴリー
お問い合わせ

【CSSのみ】コピペで使える！シンプルで軽いローディングアニメーション3選

HTML/CSS
目次

データの読み込み中や画面遷移の際に表示される「ローディングアニメーション」。 昔はGIF画像などがよく使われていましたが、現在はパフォーマンスの観点から、軽量で画質も劣化しないCSSアニメーションで実装するのが主流です。

複雑なライブラリやJavaScriptを使わなくても、CSSの animation プロパティと @keyframes を組み合わせるだけで、オシャレで実用的なローディングUIを作ることができます。

今回は、そのままコピペして使える、シンプルで汎用性の高いローディングアニメーションを3つご紹介します！

デモ動作

See the Pen CSSで作るシンプルなローディングアニメーション3選 by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>CSSローディングアニメーション 3選</h2>
  
  <div class="p-loader-list">

    <!-- 1. シンプルスピナー（王道の回転） -->
    <div class="p-card">
      <h3 class="p-card__title">1. シンプルスピナー</h3>
      <div class="p-demo-box">
        <div class="c-spinner"></div>
      </div>
    </div>

    <!-- 2. ドットバウンス（オシャレな待機） -->
    <div class="p-card">
      <h3 class="p-card__title">2. ドットバウンス</h3>
      <div class="p-demo-box">
        <div class="c-dots">
          <div class="c-dots__item"></div>
          <div class="c-dots__item"></div>
          <div class="c-dots__item"></div>
        </div>
      </div>
    </div>

    <!-- 3. パルス（波紋のように広がる） -->
    <div class="p-card">
      <h3 class="p-card__title">3. パルス（波紋）</h3>
      <div class="p-demo-box">
        <div class="c-pulse"></div>
      </div>
    </div>

  </div>
</div>

【CSS】

.l-wrap {
  color: #3e3e3e;
  padding: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
}
h2 { 
  text-align: center; 
  font-size: 16px;
  color: #1bb4d4; 
  margin-bottom: 40px; 
}

/* レイアウト・カード装飾 */
.p-loader-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}
.p-card {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  text-align: center;
}
.p-card__title { 
  font-size: 18px;
  color: #666; 
  margin-bottom: 24px; 
}
.p-demo-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

/* =========================================
   1. シンプルスピナー（回転）
========================================= */
.c-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #e0e0e0; /* 薄いグレーの枠線 */
  border-top-color: #1bb4d4; /* 上だけ青色にする */
  border-radius: 50%;
  /* 1秒かけて一定速度（linear）で無限に回転 */
  animation: spin 1s linear infinite;
}

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

/* =========================================
   2. ドットバウンス（順番に跳ねる）
========================================= */
.c-dots {
  display: flex;
  gap: 8px;
}
.c-dots__item {
  width: 16px;
  height: 16px;
  background-color: #1bb4d4;
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate; /* alternateで上下の往復を滑らかに */
}
/* 2つ目と3つ目のアニメーション開始を少しずつ遅らせる */
.c-dots__item:nth-child(2) { animation-delay: 0.2s; }
.c-dots__item:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-15px); }
}

/* =========================================
   3. パルス（波紋のように広がる）
========================================= */
.c-pulse {
  width: 50px;
  height: 50px;
  background-color: #1bb4d4;
  border-radius: 50%;
  animation: pulse 1.5s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0; /* 広がりながら透明になって消える */
  }
}

コードの解説・アニメーションのポイント

シンプルスピナー（transform: rotate）

/* =========================================
   1. シンプルスピナー（回転）
========================================= */
.c-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #e0e0e0; /* 薄いグレーの枠線 */
  border-top-color: #1bb4d4; /* 上だけ青色にする */
  border-radius: 50%;
  /* 1秒かけて一定速度（linear）で無限に回転 */
  animation: spin 1s linear infinite;
}

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

border で丸い枠線を作り、1辺だけ（今回は border-top-color）色を変えます。あとは @keyframes で0度から360度まで回転させるだけです。 ポイントは、アニメーションの速度変化を linear（一定）にすることです。これにより、ガタつきのないスムーズな回転になります。

ドットバウンス（animation-delay）

/* =========================================
   2. ドットバウンス（順番に跳ねる）
========================================= */
.c-dots {
  display: flex;
  gap: 8px;
}
.c-dots__item {
  width: 16px;
  height: 16px;
  background-color: #1bb4d4;
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate; /* alternateで上下の往復を滑らかに */
}
/* 2つ目と3つ目のアニメーション開始を少しずつ遅らせる */
.c-dots__item:nth-child(2) { animation-delay: 0.2s; }
.c-dots__item:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-15px); }
}

3つの丸を並べ、transform: translateY で上下に動かします。 ポイントは animation-delay の指定です。2つ目、3つ目の要素のアニメーション開始時間を少しずつズラす（遅らせる）ことで、順番に波打つようなオシャレな動きを表現しています。また、alternate を指定して「行って戻る」動きを滑らかにしています。

パルス（transform: scale と opacity）

/* =========================================
   3. パルス（波紋のように広がる）
========================================= */
.c-pulse {
  width: 50px;
  height: 50px;
  background-color: #1bb4d4;
  border-radius: 50%;
  animation: pulse 1.5s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0; /* 広がりながら透明になって消える */
  }
}

中心からフワッと波紋が広がるような演出です。 scale で要素を拡大させながら、同時に opacity を1（不透明）から0（透明）へ変化させます。ボタンのホバーエフェクトや、注目させたいアイコンの背景などにも応用できる便利なアニメーションです。

まとめ

今回は、CSSだけで簡単に実装できるローディングアニメーションを3つご紹介しました。

どれも基本的なプロパティの組み合わせですが、animation-delay でタイミングをずらしたり、scale と opacity を組み合わせたりすることで、表現の幅は無限に広がります。

ユーザーに「待たされているストレス」を感じさせないためにも、Webサイトの雰囲気に合ったローディングUIをサクッと実装できるようにしておきたいですね！

Prev
Next

関連記事