CSSローディングアニメーション生成ツール

生成されるCSSの仕組み

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

スピナーは太い枠線で描かれた円です。border-top-color がリングの上部だけをアクセントカラーで塗るため、リングが弧として見えます。@keyframes spin がその弧を中心の周りで回転させます。transform: rotate() による回転は、ブラウザが要素をコンポジタ上で動かすだけなので、フレームごとに再描画する場合より軽量です。

ページに表示するには、要素を1つ追加してCSSを読み込んでください：

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

アクセシビリティを確保する

• role="status" を付けると、スクリーンリーダーがスピナーを読み上げます。
• aria-label には状態を示すテキストを入れます。例：「読み込み中」。
• タイムアウト時のフォールバックなしに、スピナーの裏でコンテンツを数秒以上隠さないようにします。
• prefers-reduced-motion を尊重します。アニメーションを減らす設定のユーザーには、回転をシンプルなフェードや静的な「読み込み中…」のテキストに置き換えましょう：

@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

スピナーを使うべきとき、楽観的UIを使うべきとき

• 応答が100ミリ秒未満：スピナーは不要です。人間の目にはその遅延はほとんど感じられません。
• 100ミリ秒〜1秒：控えめなスピナー（小さな円、ボタンの「読み込み中…」表示）で二重クリックを防ぎます。
• 1秒〜10秒：目立つスピナーを使い、測定できるなら進捗を示すのが理想です。
• 10秒超：これはスピナーで解決する問題ではありません。何が遅いのかを突き止めて直しましょう。

フォーム送信やボタンクリックでは、全画面のオーバーレイより、ボタン内に収まるスピナーのほうが適していることが多いです。