CSS ローダー生成ツール

CSS ローダー生成ツールについて

このツールは純 CSS のローディングスピナーを生成します — 画像不要、JavaScript 不要。6種類の一般的なローダースタイルから選び、色・サイズ・アニメーション時間をカスタマイズし、プロジェクトに貼り付けられる HTML/CSS をコピーできます。

ローダーの種類

• リングスピナー —— 透明な隙間を持つ回転リング（クラシックな "loading" スピナー）。
• デュアルリング —— 反対方向に回転する2つの同心リング。
• 3つのドット —— バウンドする3つのドット、チャット風ローダーに最適。
• 5本のバー —— 上下にスケールする5本の縦バー（イコライザー風）。
• パルス —— 拡大縮小を繰り返す単一の円。
• 波紋 —— 外側に広がる波紋効果を持つ円。

使い方

1. ローダーの種類を選びます。
2. 色（デュアルリング/バーはセカンダリ色も）を選びます。
3. スライダーでサイズとアニメーション時間を調整します。
4. HTML をコピーで HTML + CSS ブロック全体をコピー、またはCSS のみコピーでスタイルルールのみをコピーします。
5. HTML ファイルまたはスタイルシートに貼り付けます。

よくある質問

これらのローダーはアクセシブルですか？ 装飾用です。ローダーでロード状態を示す場合は、視覚的に隠したテキストラベル（例：<span class="sr-only">読み込み中…</span>）を含め、prefers-reduced-motion を使ってアニメーションを無効にする設定のユーザーに配慮してください。

すべてのブラウザで動作しますか？ はい —— 標準 CSS（transform、animation、border-radius、opacity）のみを使用します。すべてのモダンブラウザで動作し、アニメーション未対応でも静的なシェイプに graceful に劣化します。

レスポンシブにできますか？ 生成コードは予測性のためピクセルサイズを使用します。スケールさせるには、コンテナでローダーを包み、ブレイクポイントで transform: scale() を使うか、ピクセル値を em / rem に変換してください。