🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSSローディングスピナーテンプレート：回転する丸やバーのアニメーション

📝 使用用途

このテンプレートは、ローディングスピナーを実装するために使用します。回転する丸やバーのアニメーションを使って、ページの読み込みを示すために使えます。

デモgif

読み込み中...

📘 解説

このコードでは、CSSの `@keyframes` を使用して、回転する丸（`spinner-circle`）やスライドするバー（`spinner-bar`）を作成しています。アニメーションの速度や色なども変更可能です。

🔹 部分コード

<style>
  /* 回転する丸 */
  .spinner-circle {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
  }

  /* 回転するバー */
  .spinner-bar {
    width: 50px;
    height: 5px;
    background-color: #3498db;
    animation: bar 1s infinite alternate;
  }

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

  @keyframes bar {
    0% { width: 0; }
    50% { width: 50px; }
    100% { width: 0; }
  }
</style>

💻 完全動作コード

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

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

<style>
  /* 回転する丸 */
  .spinner-circle {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
  }

  /* 回転するバー */
  .spinner-bar {
    width: 50px;
    height: 5px;
    background-color: #3498db;
    animation: bar 1s infinite alternate;
  }

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

  @keyframes bar {
    0% { width: 0; }
    50% { width: 50px; }
    100% { width: 0; }
  }
</style>
コピーしました！

🌀 ローディングスピナーの実践的活用テクニック

CSSアニメーションを使ったローディングスピナーは、ユーザーに待ち時間を快適に過ごしてもらう重要なUI要素です。適切にカスタマイズすることで、ブランドイメージに合った演出が可能になります。

🎨 デザインのカスタマイズ

基本の回転アニメーションからさらに進化させ、border-top-colorをグラデーションに変更するとモダンな印象に。また、animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1)を追加すると、より自然な動きになります。色は#3498db（青）だけでなく、サイトのテーマカラーに合わせて変更可能です。

⏱️ パフォーマンス最適化

アニメーションの滑らかさを保つために、will-change: transformプロパティを追加すると良いでしょう。また、複数のスピナーを表示する場合、animation-delayをずらしてスタッガード効果を出すと視覚的にリッチな印象になります。

📱 レスポンシブ対応

モバイルデバイスではサイズを小さく(width: 30px)、アニメーション時間を短く(animation-duration: 1s)すると、コンパクトで効率的な表示が可能です。また、背景が暗いテーマの場合はborder-colorを明るめの色に調整しましょう。

ローディングスピナーはユーザー体験を向上させる重要な要素ですが、過度に凝りすぎたり表示時間が長くなりすぎないよう注意が必要です。シンプルで分かりやすく、かつサイトの雰囲気に合ったデザインを心がけましょう。

関連テンプレート