ローディングスピナー Loading Spinner

処理中であることを示すアニメーション。ユーザーに待機を伝える。

使用場面: データ読み込み中、フォーム送信中、ページ遷移時 採用例: Twitter, Facebook

ライブデモ

ソースコード

<div class="demo-spinners">
  <div class="demo-spinner-item">
    <div class="demo-spinner-circle"></div>
    <span>Circle</span>
  </div>
  <div class="demo-spinner-item">
    <div class="demo-spinner-dots">
      <span></span><span></span><span></span>
    </div>
    <span>Dots</span>
  </div>
  <div class="demo-spinner-item">
    <div class="demo-spinner-bars">
      <span></span><span></span><span></span><span></span>
    </div>
    <span>Bars</span>
  </div>
  <div class="demo-spinner-item">
    <div class="demo-spinner-pulse"></div>
    <span>Pulse</span>
  </div>
</div>
.demo-spinners { display: flex; gap: 32px; flex-wrap: wrap; align-items: center; justify-content: center; padding: 20px; }
.demo-spinner-item { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; color: #666; }
.demo-spinner-circle {
  width: 32px; height: 32px;
  border: 3px solid color-mix(in srgb, var(--ui-primary) 20%, transparent);
  border-top-color: var(--ui-primary);
  border-radius: 50%; animation: demo-spin 0.8s linear infinite;
}
@keyframes demo-spin { to { transform: rotate(360deg); } }
.demo-spinner-dots { display: flex; gap: 6px; }
.demo-spinner-dots span {
  width: 10px; height: 10px; background: var(--ui-primary);
  border-radius: 50%; animation: demo-bounce 1.2s infinite ease-in-out;
}
.demo-spinner-dots span:nth-child(2) { animation-delay: 0.15s; }
.demo-spinner-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes demo-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
.demo-spinner-bars { display: flex; gap: 3px; align-items: end; height: 24px; }
.demo-spinner-bars span {
  width: 4px; background: var(--ui-primary); border-radius: 2px;
  animation: demo-bars 1s infinite ease-in-out;
}
.demo-spinner-bars span:nth-child(1) { animation-delay: 0s; }
.demo-spinner-bars span:nth-child(2) { animation-delay: 0.15s; }
.demo-spinner-bars span:nth-child(3) { animation-delay: 0.3s; }
.demo-spinner-bars span:nth-child(4) { animation-delay: 0.45s; }
@keyframes demo-bars { 0%, 100% { height: 8px; } 50% { height: 24px; } }
.demo-spinner-pulse {
  width: 32px; height: 32px; background: var(--ui-primary);
  border-radius: 50%; animation: demo-pulse 1.2s infinite ease-in-out;
}
@keyframes demo-pulse { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }

AIプロンプト

Basic 
ローディングスピナーをHTML/CSSで作ってください。回転するサークル型のアニメーションです。
Custom 
以下の仕様でローディングスピナーを実装してください。
- 4種類のバリエーション（サークル、ドット、バー、パルス）
- プライマリカラー: #2563eb
- サイズバリエーション（S/M/L）
- オーバーレイ付きフルスクリーンローディング
- スケルトンスクリーンとの組み合わせ
- フェードイン/アウトアニメーション
Advanced 
アクセシビリティ対応のローディングを実装してください。
- role="status" + aria-live="polite" でスクリーンリーダーに通知
- aria-label="読み込み中" の設定
- prefers-reduced-motion でアニメーションを静的表示に切替
- ローディング完了後の自動非表示
- タイムアウト処理（一定時間後にエラー表示）
- スケルトンスクリーンとスピナーの使い分け
- ページ全体 / コンポーネント単位の2パターン
- CSSのみ実装（JSなし）
← カタログに戻る