CSSローダージェネレーター
無料のCSSローダージェネレーター。純粋なCSSだけで作る10種類のローディングアニメーションをサイズ・速度・太さ・色をライブ調整しながら選び、HTMLとCSSをそのままコピーできます。
CSSローダージェネレーターは何を作る？
純粋なCSSで動くローディング表示を作ります。スピナー・ドット・バー・リップル・パルス・オービット・フリップ・ウェーブ・バウンス・グラデーションリングの10種類で、それぞれ選んだサイズ・速度・太さ・色で生成し、HTML＋CSSとしてコピーできます。
ローダーにJavaScriptや画像は必要？
必要ありません。すべてのローダーは通常のHTML要素をCSSキーフレームで動かすだけ。画像・アイコンフォント・ライブラリ・実行時スクリプトは一切不要で、CSSのブロックだけで動きます。
サイトにローダーを組み込むには？
グリッドでローダーをクリックし、HTMLブロックを表示したい場所に貼り、CSSブロックをスタイルシートに貼ってください。CSSは自己完結型で、必要な@keyframesも含まれています。
4つのパラメータは何を変える？
サイズは全ローダーの幅と高さ、速度はアニメーションの時間、太さは枠線やバーの幅に影響し、色はグリッドとコード出力の全要素を即座に塗り替えます。
コピーしたローダーが動かないのはなぜ？
多くは@keyframesブロックをコピーせずクラス規則だけ貼ったか、HTML側だけクラス名を変えたケースです。生成された2つのブロックをそのままコピーし、クラス名を変えずに使ってください。
アニメーションの性能は？
良好です。全ローダーはtransformとopacityだけをアニメーションするため、ブラウザはGPU上で合成でき、レイアウトや再描画を起こしません。1ページに複数あても滑らかです。
アクセシビリティへの配慮は？
スピナーは視覚的な飾りなので、スクリーンリーダーにはテキストのヒントが有効です。ローダーの近に視覚的に隠した「読み込み中」ラベルを置くか、ローダーにaria-hidden="true"を付けて進捗は別に通知します。
データはサーバーに送られる？
いいえ。ジェネレーターは完全にブラウザ内で動きます。設定がページの外に出ることはなく、生成コードも端末内で組み立てられます。
CSSローダージェネレーターの使い方
CSS ローダージェネレーターは、純粋な CSS だけでアニメーションするローディングスピナーを作ります。画像も JavaScript も依存ライブラリも不要。10 種類のスタイルから選び、サイズ・速度・太さ・色を調整し、生成された HTML と CSS をそのままプロジェクトへコピーできます。
- 4 つのコントロールで全体パラメータを調整します。サイズは各ローダーのボックスを、速度はアニメーションの長さを、太さは境界線やバーの幅を決め、色はすべての要素を塗ります。
- グリッドを眺めます。10 個のローダーはすべて現在の設定でライブアニメーションするので、一目で比較できます。ローダーをクリックして選択します。
- 詳細パネルには選択したローダーが拡大表示され、HTML スニペットと対応する CSS（必要な @keyframes を含む）が並びます。
- 「HTML をコピー」「CSS をコピー」でそれぞれのブロックをクリップボードへ送ります。CSS は自己完結型です。スタイルシートに貼り、ローダーを表示したい場所に HTML を置くだけ。
- パラメータを変えると、グリッド・詳細プレビュー・両方のコードブロックが即座に更新されます。
純 CSS のローダーは帯域をほとんど消費せず、どんな画面でもくっきり表示されます。アクセシビリティのためテキストラベルを添え、再生時間はおおむね 0.5 秒以上にしましょう。点滅が速すぎるスピナーは、安心感より焦りを与えます。
関連ツール
- CSS圧縮ツール 無料オンラインCSS圧縮ツール。空白、コメント、不要な文字を削除してCSSコードを即座に圧縮・最適化。ファイルサイズを削減し、ウェブパフォーマンスを向上させます。
- CSSビューティファイアー CSSコードを即座にフォーマット・美化します。圧縮されたCSSを読みやすく、適切にインデントされたコードに変換します。カスタマイズ可能なオプション付き。
- border-radius ジェネレーター 無料オンライン border-radius ジェネレーター。8つのハンドルをドラッグするかblobプリセットを選んで、有機的なCSSシェイプを作成し、コードをすぐにコピーできます。
- カラーコンバーター 無料オンラインカラーコンバーター。HEX、RGB、HSL、HSV形式をビジュアルピッカーで即座に変換。100% プライベート、ブラウザで動作。
- CSS イージング ジェネレーター 無料オンライン CSS イージング ジェネレーター。インタラクティブな曲線上で cubic-bezier の制御点をドラッグし、18 種類のプリセットから選んで、ボールのループ アニメーションで確認しながらタイミング関数を即座にコピー。
- CSS テキストシャドウ ジェネレーター 無料オンライン CSS text-shadow ジェネレーター。オフセット・ぼかし・色・不透明度を設定した複数レイヤーを重ねて、ネオンや 3D、レトロのプリセットを試せます。ライブプレビューで即 CSS コピー。
- CSS clip-path ジェネレーター 無料オンライン CSS clip-path ジェネレーター。頂点をドラッグして polygon・circle・ellipse・inset の形状を作り、ライブプレビューしながら CSS をワンクリックでコピー。
- CSS Border Radius ジェネレーター ビジュアルCSS border-radiusジェネレーター。各コーナーを独立調整、リアルタイムプレビューでCSSコードを即座にコピー。