⏳ CSSローディングスピナー生成ツール

リング・二重リング・ドット・パルス・バーの5種類のローディングスピナーから選び、サイズ・色・速度を調整してリアルタイムにプレビューできるツールです。画像や外部ライブラリを使わない純粋なHTML・CSSコードをそのままコピーできるので、どんなWebプロジェクトにも手軽に組み込めます。

使い方

1. 好みのスピナースタイルのタブ（リング・二重リング・ドット・パルス・バー）を選びます。
2. サイズ・太さ・速度のスライダーと色を調整してプレビューを確認します。
3. 「HTMLをコピー」と「CSSをコピー」（またはすべてコピー）でコードを取り出します。
4. HTMLを表示したい場所に入れ、CSSをスタイルシートに貼り付ければ完成です。

よくある質問

入力した値はサーバーに送信されますか？

いいえ。スタイル選択・プレビュー・コード生成のすべての工程がユーザーのブラウザ内だけで処理されます。どんな値もサーバーに送信・保存されません。

画像や外部ライブラリは必要ですか？

必要ありません。生成されるコードは純粋なHTMLとCSSアニメーション（@keyframes）だけなので、GIF画像やJavaScriptライブラリなしで動作します。

スピナーを中央に配置するにはどうすればいいですか？

スピナーを囲む親要素にdisplay:flex; justify-content:center; align-items:center; を指定すればOKです。色や速度は生成されたCSSの値を変えるだけで自由に調整できます。