CSSローダー／スピナー・ジェネレーター

あなたのスピナーを動かす CSS アニメーションの簡潔な歴史

このジェネレーターが出力する @keyframes ルールと animation ショートハンドは CSS Animations Module Level 1 で定義されています。最初の W3C ワーキングドラフトは 2009 年 3 月 20 日 に公開され、仕様は最終的に9年後の 2018 年 12 月 11 日に W3C 勧告 に到達しました。その頃には、すべての出荷されたブラウザが何年もの間その構文をサポートしていました:Safari 4(2009 年 6 月) -webkit- プレフィックス付き、Firefox 5(2011 年 6 月)、Internet Explorer 10(2012 年 10 月)、そして 2015 年 4 月に Chrome 43 によってプレフィックスなし。CSS Animations Module Level 2 は現在のワーキングドラフトで、animation-timeline を通じて スクロール駆動 アニメーションを追加します(Chrome 115、2023 年 7 月に出荷;Safari と Firefox は 2024 年後半に続きました)。「spinner」プリセットの回転は CSS Transforms Module Level 1 から来ます。これは別の仕様で、2019 年 2 月から Candidate Recommendation 状態ですが、普遍的に出荷されています:@keyframes ブロック内の 100% での transform: rotate(360deg) がリングを回転させます。

アクセシビリティはオプションではない:「動きを減らす」設定

2014 年以降にリリースされたすべてのオペレーティングシステムには「動きを減らす」アクセシビリティ設定が含まれています:macOS「視差効果を減らす」(アクセシビリティ → ディスプレイ内)、iOS「視差効果を減らす」、Windows「アニメーションを表示する」、Android「アニメーションを削除する」、GNOME「アニメーションを有効にする」をオフ。prefers-reduced-motion メディアクエリ(Media Queries Level 5、2017 年 11 月の W3C 初の公開ワーキングドラフトで定義)を使用すると、CSS がこの設定を検出してスピナーを停止できます。常にスピナーを次でラップしてください:

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

WCAG 2.1 達成基準 2.3.3「インタラクションからのアニメーション」(レベル AAA、W3C 勧告 2018 年 6 月 5 日) は、インタラクションによってトリガーされるすべての動きアニメーションが、動きが必須でない限り無効化できることを要求します。スピナーが必須であることはまれです。WCAG 2.2(2023 年 10 月)は同じ規則を継承します。

スクリーンリーダーの場合、スピナーを <div role="status" aria-live="polite"> でラップし、視覚的に隠された「読み込み中…」テキストを含めます。読み込みが完了したら、内容を置き換えます;ライブリージョンは支援技術に「読み込み完了」を叫ぶことなく通知します。読み込み中はコンテナリージョンに aria-busy="true" を、後に aria-busy="false" を設定します。このパターンは W3C ARIA Authoring Practices Guide のライブリージョンの章に文書化されています。

なぜ CSS スピナーは 60 fps で滑らかなままなのか

最新のブラウザのレンダリングパイプラインには3つのステージがあります:レイアウト(位置の計算)、ペイント(ピクセルの塗りつぶし)、コンポジット(GPU 上でのレイヤーの結合)。transform と opacity プロパティは、レイアウト と ペイントの両方をスキップし、純粋にコンポジタースレッドで実行される唯一の2つのプロパティです。それらをアニメーションすることは、どのフレームレートでも本質的に無料です。width、height、top、left、margin、またはボックスモデルを変更するすべてをアニメーションすると、フレームごとに完全なレイアウトとペイントパスが強制され、低スペックデバイスで急速に 60 fps を下回ります。このジェネレーター内のすべてのプリセットは、この理由から のみ transform と opacity をアニメーションします。ブラウザにヒントを与える必要がある場合、will-change: transform(CSS Will Change Module Level 1、W3C Candidate Recommendation 2022 年 4 月 26 日で定義)は要素を独自のコンポジターレイヤーに昇格させます;各レイヤーは GPU メモリを消費するので、控えめに使用してください。

スピナーが正しい答えである時、そしてそうでない時

Response Times: The 3 Important Limits(1993、2014 年に再述)で、Nielsen Norman Group の Jakob Nielsen は 3 つの知覚閾値を定義しました:0.1 秒は「瞬時」、1 秒は中断されない思考の流れの限界、10 秒はユーザーの注意を維持する限界。ローダー戦略をこれらにマッピングしてください:

• 1 秒未満: インジケーターなし。300 ms だけ点滅するスピナーはスピナーなしより悪い:目はちらつきをグリッチとして登録します。
• 1 から 5 秒: 不確定スピナーまたはバーバーポールスタイルのバー。期間を約束することなく、ユーザーに「何かが起こっている」と伝えます。
• 5 から 10 秒: パーセンテージ付きの確定 <progress max="100" value="42">。進捗が見えれば、ユーザーは長い待ち時間をよりよく耐えます。
• SPA ルートナビゲーション: スケルトン画面(最終レイアウトを模倣する灰色のプレースホルダーボックス)はスピナーより速く感じます。Luke Wroblewski は 2013 年 3 月の投稿 Mobile First Patterns で用語を造語しました;Facebook の「shimmer」(2014)と Google の Material 2(2018 年 5 月)はそれを主流にしました。

イージング関数とそれぞれがどう感じるか

animation-timing-function プロパティ(および CSS Easing Functions Module Level 1、Candidate Recommendation 2022 年 12 月 6 日)は、キーフレーム間で値がどのように進行するかを選択します:

• linear、一定レート。連続スピナーには正しい;最終状態に減速するものには間違っている。
• ease、ease-in、ease-out、ease-in-out、一般的な三次ベジエ曲線のキーワードエイリアス。ブラウザのデフォルトは ease。
• cubic-bezier(x1, y1, x2, y2)、[0, 1] の4つのfloat を持つカスタム曲線。cubic-bezier(.25, .1, .25, 1) は標準の「ease」曲線です。「オーバーシュート」バウンス効果には cubic-bezier(.68, -.55, .27, 1.55) を試してください。
• steps(n, jump-end)、離散的なジャンプ、補間せずに状態を交換するドットローダーに理想的。

よくある間違い

• prefers-reduced-motion なしでスピナーを出荷すること。前庭障害、片頭痛トリガー、または注意感受性を持つユーザーは、ウェブ上のすべての回転リングに打たれます。修正は CSS の 2 行です。
• role="status" と視覚的に隠されたテキストを忘れること。視覚的にのみ回転するスピナーは、スクリーンリーダーユーザーに何も伝えません。
• サイクルあたり 0.5 秒未満のアニメーション速度。0.3 秒で完了するスピナーは狂乱的に感じられ、多くのユーザーにとって「エラー」として読まれます。サイクルあたり 1 から 1.5 秒が快適な範囲です。
• レイアウトプロパティをアニメーションすること。width、margin、または top をアニメーションするとレイアウトスラッシングが発生します。transform と opacity に留まってください。
• すべての操作にスピナーを表示すること。データが 100 ms 以内に到着すると、スピナーが点滅してグリッチとして読まれます。成功時にクリアする setTimeout でスピナーを 200 から 300 ms 遅らせてください。
• スピナーを中央に配置するのを忘れること。コンテナが flex/grid コンテナでないために、`.spinner` がセクションの左上隅に浮かんでいるのは、2 番目に一般的な視覚バグです。

その他のよくある質問

これらのスピナーは古いブラウザで動作しますか?

すべてのモダンブラウザ(Chrome 43+、Firefox 16+、Safari 9+、Edge 12+)は、プレフィックスなしで @keyframes と transform をサポートします。Internet Explorer 10 と 11 は一部の場所で -ms- プレフィックスを必要としますが、それ以外は動作します。IE 9 以下 には CSS アニメーションのサポートがありません:アニメーション GIF にフォールバックするか、機能検出に @supports (animation: spin 1s) を使用してください。

コンテンツが読み込まれたときにスピナーを停止するにはどうすればよいですか?

DOM から要素を削除するか、display: none または hidden 属性で非表示にするか、animation-play-state: paused でアニメーションを一時停止します。再度表示する可能性がある場合は、一時停止が最も安価です。ARIA パターンを使用した場合は、コンテナに aria-busy="false" も設定し、ロード中のテキストをロード完了状態のアナウンスに置き換えます。

ピッカーで許可されている以上にスピナーの色をカスタマイズできますか?

はい。出力 CSS は通常の hex / rgb / hsl 値を使用します;それらを CSS 変数(var(--brand-primary))に置き換えて、スピナーがデザインシステムに従うようにします。デュアルカラースピナーの場合、border-color ショートハンドを編集します:border-color: var(--brand) transparent transparent transparent はクラシックな「4 分の 1 弧」の外観を与えます。

なぜ SVG または Lottie アニメーションを使わないのですか?

CSS スピナーは 200 バイト未満で、追加のリクエストも JavaScript ランタイムも必要なく、外部リソースがロードされる前にレンダリングされます。SVG は複雑な形状に適しています;Lottie は After Effects からのデザイナー作成アニメーションに適しています。一般的な「何かが読み込まれている」インジケーターの場合、CSS は仕事を正しく行う最も安価なツールです。

何かが追跡されたりサーバーに送信されたりしますか?

いいえ。ジェネレーターは完全にブラウザの JavaScript で実行されます。色の選択、サイズの調整、コピーされた CSS はページを離れることはありません。DevTools のネットワークタブで確認してください。