CSS ローダー生成（スピナー）

CSSローダーは、GIFやJavaScriptライブラリを使わずに、何かが進行中であることを示します。数行のHTMLとキーフレームアニメーションだけで、ブラウザーがコンポジターで滑らかに実行します。このジェネレーターは、リング、二重リング、跳ねるドット、バー、パルス、波紋、12本線の分割型スピナーという7つの定番デザインを、指定した色・サイズ・太さ・速度で書き出し、アクセシブルなステータスラベルと「動きの軽減」ルールも付けます。プレビューは同じCSSから描いた動くSVGです。

使い方

1. ローダーの種類を選びます。
2. 色（リングはトラックの色も）、サイズ、太さ、1周期の長さを設定します。
3. "loader" が自分のCSSと衝突するときは、クラス名を変更します。
4. ローダーを表示したい場所にHTMLを、スタイルシートにCSSをコピーします。

計算式

ring: border-top in the color, other borders in the track color, rotate(360deg) every cycle · dots: size ÷ 4 per dot, gap = size ÷ 8, delays −0.32 and −0.16 of a cycle · segments: 12 lines rotated 30° apart, each fading one twelfth of a cycle after the last

アニメーションさせるのは transform と opacity だけなので、ブラウザーはページのレイアウトをやり直さずに実行できます。負の遅延は各パーツをサイクルの途中から始めるため、最初のフレームから動いているように見えます。

計算例

初期値では、48 pxのリングに6 pxの #e5e7eb のトラックと #2563eb の円弧が付き、1秒に1回転します。border: 6px solid #e5e7eb; border-top-color: #2563eb; animation: loader-ring 1s linear infinite; です。48 pxの跳ねるドットは、12 pxのドット3つを6 px間隔で並べ、周期が1.5秒なら遅延は −0.48秒と −0.24秒になります。