CSS ロードアニメーションジェネレーター

CSS ロードアニメーションジェネレーター

純粋なCSSで8つの人気ローダーアニメーション（回転リング、ダブルリング、パルスドット、跳ねるドット、跳ねるボール、エイブルバー、パルス円、タイプインインジケータ）を生成。色、サイズ、ストローク幅、期間を調整し、ライブプレビューが即時更新され、@keyframes + 最小限のHTMLをプロジェクトにコピーできます。JavaScript、SVG、外部依存関係なし。

使用方法

1. ドロップダウンからアニメーションタイプを選択してください。
2. ローダーのサイズ（ピクセル）を設定し、リングベースタイプのストローク幅を調整してください。
3. メインカラーとトラック／セカンダリカラーを選択してください。
4. 1回のサイクルの期間（秒）を設定してください。
5. 出力形式を選択してください — HTML + CSSの組み合わせ、CSSのみ、またはHTMLのみ。
6. オプションでスクリーンリーダー用のカスタムARIAラベルを設定してください。
7. 生成されたスニペットをコピーするか、ファイルとしてダウンロードしてください。

機能

• 8つのアニメーションスタイル — 現代UIにおける最も一般的なローダーパターンをカバーしています。
• ライブプレビュー — すべての変更が即時再レンダリングされ、タイミングやスムーズさを確認してからコピーできるようになります。
• 純粋なCSS出力 — JavaScriptランタイムコストやSVGマークアップを必要としません。
• スコープ付きクラス名 — 生成されたスニペットは一意のプレフィックスを使用しており、複数のローダーが共存しても衝突しません。
• デフォルトでアクセシブル — すべてのローダーにrole=\"status\"および設定可能なaria-labelが含まれています。
• 3つの出力モード — インテグレーション方法に応じて、HTML + CSSの組み合わせ、CSSのみ、またはHTMLのみを選択できます。