CSSローディングアニメーションジェネレーター
カスタムの色、サイズ、速度を備えた自己完結型のCSS+HTMLローディングスピナー（リングまたはパルスドット）を生成します。純粋なCSS、GIFやJSは不要です。
入力
1つの完全なアニメーションサイクルの長さ（秒単位、0.2～5）。
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-loading-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"loaderType": "ring",
"color": "#3498db",
"size": "40",
"speed": "1"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-loading-animation-generator` tool (CSS Loading Animation Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-loading-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSローディングアニメーションジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
機能
CSSローディングアニメーションジェネレーターは、CSS @keyframes だけを使用した、コピー&ペーストで使用できるローディングスピナーを生成します。GIF、画像、JavaScriptアニメーションライブラリは不要です。ローダータイプ、色、サイズ、速度を選択すると、ツールがレンダリングに必要なHTMLマークアップとCSSルールを出力し、各コントロールを調整すると即座に更新されます。
CSSスピナーがGIFとJSより優れている理由
アニメーションGIFローダーとJavaScript駆動型スピナーは以前の標準でしたが、純粋なCSSローダーはほぼ常に最適な選択です：
- ファイルサイズ — GIFローダーは通常数キロバイトのバイナリ画像データですが、CSSローダーは数百バイトのテキストで、gzipでさらに圧縮でき、スタイルシートの残りとともにキャッシュされます。
- あらゆるサイズまたはDPIでの鮮明度 — GIFはスケーリング時または高密度画面で表示するとぼやけたりピクセル化するラスター画像です。CSSローダーは
border、background、transformで描画されるため、どのサイズでも鮮明に保たれます。 - 色/サイズの即座の変更 — GIFの色を変更するには画像を再度エクスポートする必要があります。CSSローダーの色は1つの値で、テーマ設定、オーバーライド、またはコンポーネントごとに変更できます。
- JavaScriptは不要 — アニメーションはCSS
animationプロパティとGPU高速化されたtransform/opacityプロパティで完全に動作するため、メインスレッドがビジーでもスムーズにアニメーション化され続けます。これはローディング表示器が機能する必要があるときです。
物理ベースのモーション、実際のロード進捗と同期したアニメーション、または複雑なマルチステージシーケンスなど、純粋なCSS @keyframes ループで表現できないものが必要な場合にのみ、JavaScript駆動型アニメーションライブラリを使用してください。単純な「何かが読み込まれている」インジケーターの場合は、CSSがシンプルで軽量です。
ローダータイプ
- Ring Spinner —
borderから構築された円で、上辺が残りとは異なる色で、border-radius: 50%です。rotateキーフレームアニメーションが継続的に回転させます。これはウェブ上で最も認識可能なローディング表示器です。 - Pulsing Dots — 3つの小さな円がスケーリングしてシーケンスでフェードインし、各円は
animation-delayがずれているため、パルスがドットを横切るように見えます。
使用方法
- ローダータイプ を選択します。Ring Spinner または Pulsing Dots です。
- ローダーの 色 を選びます。
- サイズ を調整して、ローダーが配置される場所（ボタン、カード、フルページオーバーレイ）に合わせます。
- 速度 を設定して、1つのアニメーションサイクルにかかる秒数を制御します。低いほど速く、高いほど遅くなります。
- CSS ブロックをスタイルシートにコピーし、HTML スニペットをマークアップにコピーします。どちらも完全に自己完結しているため、アニメーションが機能するために他に何も必要ありません。
よくある質問
これが機能するために何か追加のライブラリやスクリプトが必要ですか？
いいえ。すべてはCSS出力に含まれる @keyframes ルール上で実行されます。CSSとHTMLマークアップを含めるだけで、ブラウザが残りを処理します。
ページ上の複数の場所で同じローダーを再利用できますか？
はい。CSSは .io-loader クラスをターゲットにしているため、同じルールがマークアップが使用されるあらゆる場所に適用されます。異なる場所で異なる色またはサイズが必要な場合は、ここでバリアントを生成してクラスを名前変更してから（またはモディファイアークラスを追加してから）貼り付けます。
HTMLが role="status" と aria-label="Loading" を含むのはなぜですか？
これにより、ローダーがスクリーンリーダーにアクセス可能になります。スクリーンリーダーは、純粋に視覚的なスピナーが読み込み状態を表していることを知る方法がありません。
このツールはデータを保存またはアップロードしていますか？ いいえ。入力するすべての値（ローダータイプ、色、サイズ、速度）はスニペットを構築するためにブラウザでローカルに処理されます。サーバーに送信されたり、保存されたりすることはありません。