CSS ローダー生成
サイズ・時間・色を調整します。リングは軌道色・アクセント色・太さを個別に設定でき、プレビューと出力は同じ HTML と CSS を使います。
13種類の固定パターンです。各設定に必要な色、線幅、間隔、リングの項目を表示します。
スピナーや波紋の線幅を設定します。
このプレビューの動きを止めます。出力 CSS はシステムの動きを減らす設定にも従います。
太さは1–12px、サイズの6分の1以下です。
ライブプレビュー
スピナー
プレビューは装飾です。製品では簡潔で安定した読み込み状況の文言を添えてください。
使い方
使い方
- 元のスピナー、ドット、バー、リング、二重リングを含む13種類から選びます。
- サイズ・時間・色と、線幅・間隔・リングの太さを調整します。
- 通常と動きを減らした表示を比較し、HTML と CSS をコピーします。
設定と制限
サイズ24–96px、時間0.4–3s、スピナーや波紋の線幅とドット、バー、グリッド、波の間隔は2–12pxです。リングの太さは1–12px、サイズの6分の1以下です。必要な設定のみ表示し、色は6桁の16進数です。複数図形ではサイズで図形や高さを調整し、全幅には間隔も含みます。
プレビューと出力
隔離されたスタイルルートで出力と同じHTMLとCSSを描画します。リングと二重リングは軌道色とアクセント色、他の11種類は単色です。脈動はサイズと透明度、波紋は広がる輪、グリッドは9つの四角、軌道は中心周りの回転、反転は四角の回転、追尾は6点、バウンドは2つの円、波は5本のバーを動かします。固定パターンのみで、ユーザーのHTMLやCSSは受け付けません。ローカル生成です。
アクセシブルな動き
出力 HTML は role="status" と翻訳済み読み込みラベルを含みます。CSS は疑似要素も含め prefers-reduced-motion に従います。状況文言は安定させ、タスク状態が変わるときだけ更新してください。
よくある質問
あわせて知りたいこと
出力したローダーに JavaScript は必要ですか？
いいえ。コピーしたローダーは HTML と CSS のみを使います。
動きを減らすと状況も消えますか？
いいえ。アニメーションを止め、認識できる静的な形と状況ラベルを残します。
何かアップロードされますか？
いいえ。設定・プレビュー・コード生成はブラウザー内で行います。