CSSローダージェネレーター - スピナー＆ローディングアニメーション オンライン
リアルタイムプレビューとカスタマイズ可能なピュアCSSローディングアニメーションを作成
<style> .loader { width: 48px; height: 48px; border: calc(48px / 8) solid #93c5fd; border-top-color: #3b82f6; border-radius: 50%; animation: spinnerBorder-spin 1s linear infinite; } @keyframes spinnerBorder-spin { to { transform: rotate(360deg); } } </style> <div class="loader"></div>
よくある質問
CSSローダージェネレーターとは何ですか？
CSSローダージェネレーターは、CSSキーフレームアニメーションをゼロから書くことなく、純粋なCSSローディングアニメーション（スピナー、プログレスインジケーター、ドット、バー、パルスなど）を作成するのに役立つオンラインツールです。ローディングインジケーターは、コンテンツの取得、処理、読み込み時に視覚的なフィードバックを提供する重要なUIコンポーネントです。このツールは、色、サイズ、アニメーション速度をカスタマイズでき、本番環境ですぐに使用できるクリーンでコピー可能なHTMLおよびCSSコードとしてエクスポートできる、事前構築されたローダーデザインのギャラリーを提供します。
このCSSローダージェネレーターはどのように使用しますか？
1. ローダーギャラリーを閲覧し、デザインに合ったローダースタイル（スピナー、ドット、バー、パルス、リング、その他のスタイル）をクリックします。2. カテゴリタブを使用してタイプ別にローダーをフィルタリングします。3. カラーピッカーを使用してプライマリカラーをカスタマイズします。4. サイズスライダー（16-96px）と速度スライダー（0.3-3.0秒）を調整します。5. プレビュー背景をライトとダークで切り替えます。6. 出力形式（HTML、CSS、または結合）を選択し、コピーをクリックします。
データは安全ですか？サーバーに送信されるものはありますか？
はい、データは完全に安全です。このツールはクライアントサイドのJavaScriptとCSSを使用して、完全にブラウザ内で実行されます。設定、色の値、コード出力がサーバーに送信されることはありません。ローダーアニメーションは純粋なCSSを使用してブラウザで直接レンダリングされます。一度読み込まれれば、オフラインでも動作します。
GIF、SVG、JavaScriptアニメーションの代わりに純粋なCSSローダーを使用する理由は？
純粋なCSSローダーにはいくつかの利点があります：(1) パフォーマンス — CSSアニメーションはGPUによってハードウェアアクセラレーションされ、よりスムーズな60fpsアニメーションを実現します。(2) スケーラビリティ — CSSローダーはピクセル化なしにあらゆるサイズで完璧にスケーリングします。(3) ファイルサイズ — CSSローダーはGIFファイル（各10-50KB）と比較して実質的にゼロバイトです。(4) カスタマイズ性 — 色、サイズ、速度をCSSプロパティで即座に変更できます。(5) 依存関係なし — JavaScriptライブラリや画像ファイルが不要です。(6) アクセシビリティ — CSSアニメーションはprefers-reduced-motionメディアクエリに応答します。
CSSローディングアニメーションは技術的にどのように機能しますか？
CSSローディングアニメーションは複数のCSS機能を組み合わせています：@keyframesルールがアニメーションシーケンス（回転、スケーリング、不透明度の遷移など）を定義します。animationショートハンドプロパティは、持続時間、タイミング関数、反復回数とともにキーフレームを適用します。疑似要素（::before、::after）は、単一のHTML要素から複数パートのアニメーションを可能にします。CSS transformプロパティ（rotate、scale、translate）はGPUコンポジティングを介して視覚的な変更を効率的に処理します。animation-delayは複数の要素にわたるスタガード効果を作成します。
コピーした後に生成されたローダーCSSをカスタマイズできますか？
はい、生成されたCSSは標準的でよくフォーマットされたコードであり、自由に変更できます。CSS変数出力モードを使用する場合、:rootカスタムプロパティ値を更新するだけで色、サイズ、速度を変更できます — これはテーマ設定に特に便利です。.loaderクラスの名前を変更したり、animation-timing-functionを調整したり、キーフレームのパーセンテージを変更したりすることもできます。
CSSローダーをアクセシブルにするにはどうすればよいですか？
CSSローダーをアクセシブルにするには：(1) ローダー要素にrole="status"とaria-label="Loading"を追加します。(2) ローダー内に<span class="sr-only">Loading...</span>のような視覚的に非表示のテキストを含めます。(3) @media (prefers-reduced-motion: reduce) { .loader { animation: none; } }を追加してprefers-reduced-motionを尊重します。(4) ローダーと背景の間に十分な色のコントラストを確保します。
コード例
// CSS Loader Generator - JavaScript Implementation
const LOADERS = {
spinnerBorder: {
name: 'Border Spinner',
category: 'spinner',
html: '<div class="loader"></div>',
css: (color, size, speed) => `
.loader {
width: ${size}px;
height: ${size}px;
border: ${Math.round(size / 8)}px solid #f3f3f3;
border-top: ${Math.round(size / 8)}px solid ${color};
border-radius: 50%;
animation: loader-spin ${speed}s linear infinite;
}
@keyframes loader-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}`,
},
bouncingDots: {
name: 'Bouncing Dots',
category: 'dots',
html: '<div class="loader"><span></span><span></span><span></span></div>',
css: (color, size, speed) => `
.loader {
display: flex;
gap: ${Math.round(size / 6)}px;
align-items: center;
}
.loader span {
width: ${Math.round(size / 4)}px;
height: ${Math.round(size / 4)}px;
background-color: ${color};
border-radius: 50%;
animation: loader-bounce ${speed}s ease-in-out infinite;
}
.loader span:nth-child(2) {
animation-delay: ${(-speed / 3).toFixed(2)}s;
}
.loader span:nth-child(3) {
animation-delay: ${(-speed / 6).toFixed(2)}s;
}
@keyframes loader-bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}`,
},
};
function generateLoader(loaderId, options = {}) {
const { color = '#3b82f6', size = 48, speed = 1.0 } = options;
const loader = LOADERS[loaderId];
if (!loader) throw new Error(`Unknown loader: ${loaderId}`);
return {
html: loader.html,
css: loader.css(color, size, speed).trim(),
};
}
// Usage
const result = generateLoader('spinnerBorder', {
color: '#ef4444', size: 64, speed: 0.8
});
console.log('HTML:', result.html);
console.log('CSS:', result.css);