SVG ローディングスピナー生成器

SVG ローディングスピナー生成器

ブラウザ内でクリアでアニメーションされたSVG読み込みスパinerを構築し、プロジェクト用に使用可能なマーカーをコピーできます。7つの人気スパinerスタイルから選択し、サイズ、線の幅、色、アニメーションスピードを調整し、リアルタイムでライブプレビューが更新されます。インラインSVG、HTML + CSSスニペット、またはReact JSXコンポーネントとしてエクスポートできます。

使用方法

1. [ブラウザのchrome]を選択し、 スパinerタイプ — 円の線描画、ダブルリング、ドットリング、パルスドット、バウンスドット、バー読み込み、またはリップル。
2. 調整 サイズ, 線の幅, メインカラーと、 トラック／セカンダリカラー ブランドに合わせます。
3. [名前]を設定してください アニメーションスピード (秒単位)で読み込みサイクルのスピードを制御します。
4. を選択してください 出力形式: インラインSVG（1ファイル、どこでも使用可能）、HTML + CSS（別個のスタイルブロック）、またはReactコンポーネント（JSX）。
5. 出力パネルから生成コードをコピーするか、ファイルとしてダウンロードします。

機能

• 7つのスパinerスタイル — 円の線描画、ダブルリング、ドットリング、パルスドット、バウンスドット、バー読み込み、リップル。
• リアルタイムアニメーションプレビュー チェックパターンの背景上に表示され、色の選択を一目で判断できます。
• 自立型インラインSVG — アニメーションCSSはSVG内に埋め込まれており、外部スタイルシートなしで動作します。
• HTML + CSS スタイルブロックを別にエクスポートする場合、マーカーとスタイルを分離したい場合に使用します。
• Reactコンポーネント（JSX） Next.js、Vite、またはCreate React Appプロジェクトに貼り付ける準備ができています。
• サイズ、線の幅、色、スピードのカスタマイズ 合理的なデフォルト値とバリデーション付きです。
• アクセシビリティが組み込まれています — すべてのスパinerに role="status" および調整可能な aria-label により、スクリーンリーダーが読み込み状態を発声します。
• スコープ付きクラス名 各スニペットごとに設定されており、同じページに複数のスパinerがある場合でも衝突しません。

各スパinerの使用タイミング

• 円の線描画 / ダブルリング — プログレスが不明な「不定」の待ち時間（API呼び出し、ページ遷移など）に使用します。
• ドットリング — サブテクスチャーの「考え中」のインジケータで、UIとの調和が良好です。
• パルスドット / バウンスドット — チャットの「タイプ中」のようなフレンドリーで会話的なコンテキストに使用します。
• バー読み込み — ファイルのアップロード、ダウンロード、または広い低プロファイルのインジケータが必要な場所に使用します。
• Ripple — コンテンツが表示される直前のソフトで、環境的なフィードバックを提供します。