CSSローディングアニメーション作成

Q: CSS ローダーと CSS スピナーの違いは何ですか?

CSS スピナーは、特定のアニメーション タイプの 1 つであり、回転するシェイプです。 CSS ローダーはスピナー、ドット、バー、パルス、スケルトン スクリーンを含む広義の用語です。 すべてのスピナーはローダーです。すべてのローダーがスピナーであるわけではありません。

Q: 代わりに CSS ローダーまたは Lottie アニメーションを使用する必要がありますか?

Lottie (EN) は、After Effects からエクスポートされたJSON ベースのベクター アニメーションをレンダリングし、複雑なイラスト付きモーション用に構築されています。 CSS ローダーは軽量かつシンプルであり、単純なスピナーやプログレス バーに適しています。アニメーションに動きだけでなくイラストが必要な場合は、ロッティに手を伸ばしてください。

Q: CSS ローダー ジェネレーターは無料で使用できますか?

これを含むほとんどの CSS ローダー ジェネレーターは、コア CSS 出力に対して無料です。有料レベルは通常、GIF または APNG のエクスポート、アイコンのカスタマイズ、帰属の削除などの追加機能に適用されます。 SpinKit や Load Awesome などのオープンソース ライブラリには、 無料でMIT ライセンスが適用されます。

Q: 開発者は CSS ローダーを使用するときにどのような間違いを犯しますか?

ジェネレーターのクラス名を名前を変更せずにプロジェクトに直接コピーすると、既存のスタイルと衝突します。 aria-live ラッパーをスキップするのが一般的です。 1 ページに複数のスピナー ライブラリをロードすると、CSS バンドルが肥大化します。

ローディングの種類

サイズ (px)

40px

色

速度

生成されたCSS

Bogdan Sandu (EN) 著 · 公開 2025 年 6 月 9 日 · 最終更新日 2026 年 9 月 14 日

このCSSローディングアニメーション生成ツールは、読み込み中の表示に使うCSSを作成します。キーフレームを手作業で書く必要はありません。ローダーを選び、3つの設定を調整して結果をコピーしてください。どのローダーもCSSだけで動作し、JavaScript、画像、外部ライブラリへの依存はありません。

設定できる内容:

ローダータイプ: スピナー、ドット、パルス、ウェーブ、リング、グリッド、ハート、プログレスバー、手裏剣、バーウェーブ、催眠、またはフリップスクエア
サイズは 20 ピクセルから 100 ピクセルまで
カラーピッカーからのカラー。ローダーの可動部分に適用されます。
アニメーションの継続時間を分割する 0.5 倍から 2 倍の速度

スライダーをドラッグするとプレビューが更新され、同時にコードパネルが書き換えられます。 transform をアニメーション化するプログレスバーを除いて、すべてのローダーは opacity または background-position をアニメーション化します。

この CSS ローダージェネレーターの使用方法

ドロップダウンからローダーのタイプを選択し、プレビューを確認します。
サイズを設定し、色を選択します。ローダーに応じて、回転する境界線、ドット、バー、または塗りつぶしに色が適用されます。
速度スライダーをドラッグします。 1x を超える値ではループが短くなり、1x 未満の値ではループが長くなります。
[コピー] をクリックし、CSS をスタイルシートに貼り付けます。
ローダーが表示される場所に、一致するクラスを持つ要素を 1 つ追加します。クラス名は custom_loader_ の後に型が続きます。

12 個のローダーのうち 11 個のローダーの HTML は単一の空の要素です。

<div class="custom_loader_spinner" role="status" aria-label="Loading"></div>

ただしバーウェーブは例外です。その CSS は 5 つの子要素をターゲットとしているため、次のマークアップが必要です。

<div class="custom_loader_bar-wave" role="status" aria-label="Loading">
  <div></div><div></div><div></div><div></div><div></div>
</div>

デフォルト設定では、スピナーは次の CSS を生成します。

.custom_loader_spinner {
  width: 40px;
  height: 40px;
  position: relative;
}

.custom_loader_spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: custom_spin 1s infinite linear;
}

@keyframes custom_spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

2 つのブロックは意図的にセレクターを共有します。 1 つ目はボックスを設定し、2 つ目は外観を設定します。コードがプロジェクトに追加されたら、それらをマージできます。

ツールでできないこと

CSSのみをコピーします。上記の HTML はコードパネルにないため、このページを開いたままにするか、クラス名を書き留めてください。
スピナーとリングのトラックの色、およびプログレスバーのライトグレーは #f3f3f3 で固定されています。暗い背景の場合は手動で変更してください。
SCSS または Tailwind 出力はなく、GIF または SVG エクスポートもありません。
アクセシビリティ属性や動作制限ルールは追加されません。上記のように role="status" を追加し、次のようなメディアクエリを追加します。

@media (prefers-reduced-motion: reduce) {
  .custom_loader_spinner {
    animation-duration: 3s;
  }
}

ループを遅くすると、モーションの大部分が削除されながら、「まだ読み込み中」信号が維持されます。 prefers-reduced-motion (EN) クエリは、現在のすべてのブラウザでサポートされています。

CSS ローダージェネレーターとは何ですか?

CSS ローダージェネレーターは、手書きのキーフレームを使用せずにインジケーターを読み込むためのすぐに使用できる CSS アニメーションコードを生成するブラウザベースのツールです。

出力は純粋な CSS (EN) であり、ビデオファイルや画像シーケンスではないため、サーバー上でレンダリングしたり、別のアセットとして読み込んだりするものはありません。

ほとんどのツールはその下で同じように機能します。スタイルを選択し、いくつかのスライダーをドラッグすると、横のパネルに実際のコードが書き込まれている間、ライブプレビューがリアルタイムで更新されます。

置き換えるもの: @keyframes ブロックを手動で作成し、回転角度や不透明度のステップを手動で計算します。
そうでないもの: JavaScript アニメーションライブラリ、完全な UI フレームワーク、またはビデオプレーヤー

多くの場合、最初に 1 つを試し、値を微調整してから、最終的なスニペットをプロジェクトに直接コピーします。

どのような種類の CSS ローダーアニメーションを生成できますか?

ほとんどのジェネレーターは、出力を 6 つの認識可能なファミリー (スピナー、ドット、バー、パルス、リング、スケルトン) に分類します。

アニメーションは、最もよく使用される CSS 機能の 1 つです。ローダーは、ほとんどの開発者が最初にローダーに手を伸ばす場所の 1 つです。スピナーは、明白な役割を備えた小さな自己完結型アニメーションであるためです。

種類	視覚的な動作	主な用途
回転型インジケーター	連続回転	待ち時間は 2 秒未満
点または棒	シーケンシャルスケールまたは不透明度パルス	チャットアプリ、メッセージ送信
リング	静的トラックによる回転円弧	ファイルのアップロード、フォームの送信
スケルトン	灰色のコンテンツの輪郭、動きがない、またはゆっくりとした輝き	フィード、カード、画像の多いページ

Facebook のモバイルアプリは、スケルトンスクリーン (EN)を主流に押し上げるのに役立ちました。ニュースフィードの空白スペースを、その下のコンテンツのような形をした灰色の輪郭に置き換えました。

スピナーは依然としてほとんどのサイトでデフォルトの選択肢です。 CSS スピナー (EN)のコレクションをざっと見てみると、同じ少数の回転図形からどれだけ多様性が生まれるかがわかります。このページの 12 個のローダーは、スピナー、ドット、バー、パルス、リングファミリをカバーしています。スケルトン画面はレイアウトに関連付けられた異なるパターンであるため、一般的にスケルトン画面を生成できるジェネレーターはありません。

CSS のみ、SVG、およびハイブリッドレンダリング: CSS ローダージェネレーターがアニメーションを構築する方法

ライブプレビューの背後には 3 つの異なるレンダリングパスがあり、ほとんどのジェネレーターはどれを取得しているのかを教えてくれません。これは CSS のみです。

CSS のみのメソッドは、border-radius または box-shadow を使用してシェイプを描画し、transform と opacity を使用してそれを移動します。これは、他のすべての CSS アニメーションを強化する同じ @keyframes (EN) メカニズムに基づいて構築されています。

SVG ベースの方法では、最初にベクトルパスとして形状を描画し、次にストロークダシャーレイオフセットまたは単純な CSS 変換を通じてモーションを適用します。これは、div ではなく SVG シェイプ (EN) をアニメーション化することについて話すときの意味です。

方法	テクニック	ファイルの重量	編集可能性
CSSのみ	シェイプとキーフレーム変換	最軽量、マークアップのオーバーヘッドなし	簡単でプレーンな CSS 値
SVGベース	ベクターパスとストロークアニメーション	アイコンごとにわずかに重い	パスまたはストロークの編集が必要です
ハイブリッド	SVG シェイプ、CSS 駆動のモーション	中等度	両方のスキルセットの組み合わせ

ハイブリッドレンダリングは、ジェネレーターが複雑な形状 (ロゴマーク、アイコン) を必要としながらも、単純な CSS 変数を通じてモーションを制御したい場合に現れます。これにより、SVG 独自のアニメーション構文が回避されます。

CSS ローダーアニメーションのブラウザサポート

ブラウザのサポートがこの種のアニメーションにとって大きな障害になるのは何年も前になくなりました。

caniuse.com (EN) によると、CSS アニメーションは Internet Explorer バージョン 10 以降、Firefox バージョン 16 以降、Safari バージョン 9 以降、Chrome バージョン 43 以降ではプレフィックスなしで出荷されています。以前のバージョンではベンダープレフィックスが必要でした。

現在構築されたジェネレーターは、ベンダープレフィックス付きのコードをまったく出力することはほとんどありません。視聴者がプレフィックスを必要とするブラウザをまだ実行していることは丸め誤差となり、このツールではプレフィックスも除外されます。

CSS ローダージェネレーターはどのようなカスタマイズコントロールを提供しますか?

すべてのジェネレーターは、インターフェイスがツールごとにまったく異なるように見える場合でも、同じコアダイヤルをいくつか公開します。これにはサイズ、色、速度があります。

サイズ: ピクセルまたはrem値。最小範囲と最大範囲にロックされる場合があります。

カラー: 通常は 16 進ピッカーですが、場合によっては RGB または HSL 入力を並べて使用します。

ストローク幅: は、SVG ベースのスタイルに最も関連する、リングまたはバーの見た目の太さを制御します。

速度: はアニメーションの継続時間に直接マッピングされ、通常は 0.6 秒から 2 秒の間になります。

要素数: ローダーを構成するドット、バー、またはセグメントの数。

サイズ制御は、モバイル用に別の値を強制するのではなく、clamp() で実行されることが多くなり、ローダーが床と天井の間でスケールできるようになります。クランプ値計算ツールを使用すると、推測に頼らずにこれら 2 つのエンドポイントを選択できます。上記のジェネレーターは固定ピクセル値を出力するため、必要に応じてそれらを Clamp() に置き換えます。

通常、カラーフィールドには 16 進コードが必要です。形式間の切り替えとは、デザインシステムが他の形式のカラートークンを渡すたびに、その 16 進値を RGB に変換することを意味します。

ほとんどのジェネレーターは、主にプレビューでページレイアウトが崩れるのを防ぐために、サイズを 16 ピクセルから 200 ピクセルの間で制限し、その範囲外のものを拒否します。ここでの範囲は 20px ～ 100px です。

CSS ローダージェネレーターはどのような出力形式を提供しますか?

3 つの出力形式は、生の CSS、SCSS、および CSS と HTML を組み合わせたスニペットという、市場のほぼすべてのジェネレーターをカバーします。このツールは、上記で説明したマークアップを使用して生の CSS を生成します。

形式	代表的なファイル	ベストフィット
生のCSS	.css	クイックプロトタイプ、静的サイト
SCSS	.scss 部分的	システムの設計、より大きなコードベース
CSS + HTML	結合されたスニペット	コピーして既存のページに貼り付けます

Bootstrap と Tailwind はどちらも、単一のフラットスタイルシートではなく、独自のソースを Sass またはビルドステップとして出荷します。まさに、これらのシステムのいずれかにすでに入っているチームが、生の CSS ではなく SCSS エクスポートに手を伸ばす傾向があるのは、まさにこのためです。

どのような形式でリリースされるにせよ、製品コードは通常、出荷前に CSS ミニファイアー (EN) を通過し、ジェネレーターが残した空白やコメントが削除されます。

逆に、エクスポートしたコードを CSS ビューティファイア (EN)に貼り付けると、何を保持し、何をトリミングするかを決定するときに読みやすくなります。

生成されるクラス名は短くて汎用的なもの (スピナー、ローダーリング) になる傾向があるため、ほとんどの人はコードが実際のプロジェクトに到達する前にクラス名を変更します。ここで使用されている custom_loader_ プレフィックスは衝突する可能性は低いですが、コードベースに命名規則がある場合は名前を変更してください。

どの CSS ローダージェネレーターツールを使用する価値がありますか?

オプションを比較し始めると、いくつかの名前が何度も出てきます。Loading.io (EN)、SpinKit (EN)、Load Awesome (EN)、Bootstrap (EN) と Tailwind (EN) 内の組み込みスピナー。

ツール	出力タイプ	カスタマイズの深さ	ライセンス
Loading.io	SVG または CSS、さらに GIF/APNG エクスポート	高機能なライブビジュアルエディター	無料利用枠、高度なエクスポートは有料
SpinKit	純粋なCSS	中程度、CSS 変数経由	MIT、オープンソース
Load Awesome	純粋なCSS	中程度の固定されたスタイルのセット	MIT、オープンソース
Bootstrap	純粋な CSS コンポーネント	低、テーマ変数に限定	MIT、オープンソース
Tailwind	ユーティリティクラス (animate-spin)	ユーティリティオーバーライドによる低から中程度	MIT、オープンソース
この発電機	ピュアCSS 12種類	サイズ、色、速度	無料

専用の生成ツール:

長所: きめ細かい制御、ライブプレビュー、フレームワークへの依存なし
短所: 別の外部依存関係を追跡する必要があり、スタイルが既存の命名規則と衝突する可能性があります。

フレームワークの組み込み:

長所: フレームワークがすでにプロジェクト内にある場合、追加のセットアップは不要で、残りの UI と一貫性があります。
短所: 選択できるアニメーションスタイルが少なく、カスタマイズはフレームワーク独自の変数によって囲まれています。

SpinKit (EN) 自体の README には、ハードウェアアクセラレーションによる変換アニメーションと不透明アニメーションが使用されており、ビルドステップを必要としないプレーンな npm パッケージとして配布されていると記載されています。

見た目よりもその詳細が重要です。 Tailwind の組み込みスピナーユーティリティ (EN) も同じ制約に従い、ブラウザが効率的にアニメーション化する方法をすでに知っているプロパティに固執します。

CSS ローダーはページのパフォーマンスにどのような影響を与えますか?

ローダーの仕事全体は待機をスムーズに進めることなので、途切れたりページを移動したりするローダーはそれ自体の目的を果たせません。

最近のブラウザでは、変換と不透明度という 2 つの CSS プロパティのみを安価にアニメーション化できます。幅や上部のアニメーションなど、その他の操作を行うと、ブラウザは強制的にレイアウトに戻り、フレームごとにペイント作業が行われます。

web.dev (EN) によると、60 FPS はブラウザがアニメーションを滑らかに見せるためのフレームレートの目標です。
ユーザーが遅延を感じ始めるまでに、各フレームには 16.7 ミリ秒の割り当てが与えられます。
変換と不透明度は、コンポジタがレイアウトやペイントをトリガーせずにアニメーション化できる (EN)プロパティです。
HTTP Archive Web Almanac (EN) によると、モバイルページの 81% が 2025 年に良好な累積レイアウトシフトスコアを達成しました。

独自の固定スペース (ラッパー要素に設定された幅と高さ) を予約するローダーは、そのレイアウトシフト数にはまったく影響しません。プレースホルダーを使用せずに構築されたものは、通常、プレースホルダーを使用するものです。ここでのすべてのローダーは、幅と高さを明示的に設定します。

スケルトンスクリーンには、ほとんどのスピナーでは発生しないわずかな追加コストがかかります。カードのグリッド全体でグラデーションまたはきらめくアニメーションを繰り返すということは、より多くの要素が一度にアニメーション化されることを意味します。たとえ個々のアニメーションが安くても、ローエンドの携帯電話ではその金額が加算されます。

CSS ローダーはアクセシビリティ基準を満たしていますか?

生成されたローダーのほとんどはデフォルトでアクセシビリティに失敗しますが、これはアニメーション自体が問題であるためではありません。

欠けている部分はほとんどの場合マークアップです。役割もラベルも持たない回転 div は、ページ上で何が起こっているかについてスクリーンリーダーに何も伝えません。

属性	目的	どこへ行くのか
役割="ステータス"	地域をライブステータス更新として発表します	ローダー周りのラッパー
aria-live="礼儀正しい"	中断することなく変更をアナウンスするように支援技術に指示します	同じラッパー要素
aria-busy="true"	シグナルのコンテンツはまだ更新中です	読み込み中は true、完了すると false に切り替わります

ここで重要な ARIA (EN) 属性については、詳細に文書化されています。 MDN では、広く利用可能なベースラインとして ariaBusy (EN) リフレクションプロパティと、ステータスロール (EN)はローダーの適切なラッパーです。

モーション自体はマークアップとは別の問題です。 W3C の Web コンテンツアクセシビリティガイドラインには、達成基準 2.3.3、インタラクションからのアニメーション (EN)が含まれています。これはレベル AAA のルールで、ユーザーインタラクションによってトリガーされるモーションは、コンテンツに不可欠でない限りオフにすることが求められます。

このルールが存在するのは、モーションには意味のあるユーザーのスライスに対して実際の物理的コストがかかるためです。 Archives of Internal Medicine に掲載された国民健康栄養検査調査データを使用した研究 (EN)によると、米国成人の 40 歳以上の 35.4% が前庭機能障害であると推定されています。

prefers-reduced-motion メディアクエリを尊重することが実際的な修正です。環境設定が設定されている場合は、回転または跳ねるアニメーションを単純な不透明度フェードと交換したり、速度を下げたりできます。ローダーを完全に取り外さないでください。

X (旧 Twitter) は、オペレーティングシステムの設定とは別に、独自のアクセシビリティ設定でモーション削減トグルをすでに公開しています。これは製品レベルでも同じ原則が適用されます。

SVG ベースのローダーには、プレーンな CSS ローダーには必要のないものがもう 1 つ必要です。 aria-hidden 属性や代替テキストがないと、装飾的な SVG が意味のないパスデータの文字列として読み上げられてしまう可能性があります。この修正については、アクセス可能な SVG ファイル (EN) に関するガイドで説明されています。

生成された CSS ローダーを Web サイトに実装するにはどうすればよいですか?

生成されたローダーをエクスポートパネルからライブページに取得するには、コードを生成したツールに関係なく、同じ順序に従います。

CSS ブロックをスタイルシートまたはスコープ付きスタイルタグにコピーします。
ローダーが表示される場所に、一致する HTML マークアップを貼り付けます。
アクセシビリティラッパー (role、aria-live、aria-busy) を周囲に追加します。
デフォルトでは、display:none または Visibility:hidden を使用してローダーを非表示にします。
リクエストが開始される直前にオンに切り替え、レスポンスが到着したらオフに切り替えます。

この切り替えステップは通常、フェッチ呼び出しまたは Ajax (EN) リクエストに関連付けられています。待機するものが何もないローダーには存在する理由がありません。

CSS ローダーを React または Vue プロジェクトに統合する

2026 年 9 月には、react-loader-spinner (EN) だけで、週あたり約 289,000 件のダウンロードが npm レジストリに記録されました。これは、チームが生のマークアップを手作業でコピーするのではなく、パッケージ化されたコンポーネントにアクセスする頻度を十分に物語っています。

Reactでの実装：

ローダーのマークアップを、読み込みブール値を小道具として受け入れる小さなコンポーネントでラップします。
同じブール値を使用して条件付きでレンダリングするか、MUI の CircularProgress (EN) などのライブラリコンポーネントを使用します。
フェッチ呼び出しの周りの useEffect 内で設定された状態からの可視性を駆動します。

Vueでの実装：

リアクティブな参照に対して v-if または v-show を使用してラッパーの可視性をバインドします。
非同期呼び出しの前にその参照を true に切り替え、finally ブロックで false に切り替えます。

どちらのフレームワークも、アニメーション自体を実行するために JavaScript (EN) を必要とせず、ローダーがいつ画面に表示されるかを決定するだけで済みます。

CSS ローダージェネレーターが機能しないのはどのような場合ですか?

生成されたスピナーは、待ち時間が短く予測可能でなくなった瞬間に間違ったツールになります。

ヤコブニールセン (EN)のユーザビリティ調査では、その閾値が明確に示されています。応答時間が 10 秒を経過したら、不定のスピナーではなく完了パーセントインジケーターを表示します。これは、スピナーはアクティビティを確認しますが、残量については何も表示しないためです。

CSS ローダージェネレーターが生成するすべてのアニメーションは、上記のプログレスバーを含め、設計上不定です。ジェネレーターは実際のリクエストにどれくらい時間がかかるかわからないため、実際のパーセンテージを計算するものはありません。

ユーザーが残量を把握する必要がある、長時間にわたるアップロード、エクスポート、または複数ステップのジョブ
約 300 ミリ秒未満の非常に短い応答。どのローダーも、ユーザーがほとんど登録しないモーションのフラッシュを追加するだけです。
複数のアニメーションローダーを同時に実行するローエンドデバイス。各ローダーが同じコンポジタリソースをめぐって競合します。
すでに独自の読み込み状態を出荷しているコンポーネントライブラリまたは設計システム。生成された CSS をドロップすると、2 つの矛盾する真実の情報源が作成されます

この不一致によるユーザビリティのコストは、目立たないものの現実のものです。ユーザーが答えを期待した地点を超えて画面上にスピナーが表示されると、進行状況ではなく、ページがスタックしているように見えます。

ジェネレーターには最小表示期間も組み込まれていないため、リクエストがほぼ瞬時に解決されると、ローダーが点滅して消えます。チームは通常、ハードカットではなく、短い不透明度トランジションを使用してそれを和らげます。

よくある質問：CSSローディングアニメーション作成

CSS ローダーと CSS スピナーの違いは何ですか?

CSS スピナーは、特定のアニメーションタイプの 1 つであり、回転するシェイプです。 CSS ローダーはスピナー、ドット、バー、パルス、スケルトンスクリーンを含む広義の用語です。

すべてのスピナーはローダーです。すべてのローダーがスピナーであるわけではありません。

代わりに CSS ローダーまたは Lottie アニメーションを使用する必要がありますか?

Lottie (EN) は、After Effects からエクスポートされたJSON ベースのベクターアニメーションをレンダリングし、複雑なイラスト付きモーション用に構築されています。

CSS ローダーは軽量かつシンプルであり、単純なスピナーやプログレスバーに適しています。アニメーションに動きだけでなくイラストが必要な場合は、ロッティに手を伸ばしてください。

CSS ローダージェネレーターは無料で使用できますか?

これを含むほとんどの CSS ローダージェネレーターは、コア CSS 出力に対して無料です。有料レベルは通常、GIF または APNG のエクスポート、アイコンのカスタマイズ、帰属の削除などの追加機能に適用されます。

SpinKit や Load Awesome などのオープンソースライブラリには、無料でMIT ライセンスが適用されます。

開発者は CSS ローダーを使用するときにどのような間違いを犯しますか?

ジェネレーターのクラス名を名前を変更せずにプロジェクトに直接コピーすると、既存のスタイルと衝突します。

aria-live ラッパーをスキップするのが一般的です。 1 ページに複数のスピナーライブラリをロードすると、CSS バンドルが肥大化します。

CSS ローダージェネレーターを選択するときに最初に確認すべきことは何ですか?

CSS ローダージェネレーターは、エクスポートされたアニメーションが変換と不透明度のみを使用し、再利用可能なライセンスの下で出荷され、起動前にアクセシビリティラッパーを取得すると、プロジェクト内でその地位を獲得します。

実際のコードベースで存続するかどうかは、次の 3 つのチェックで判断されます。

レンダリング方法: 変換と不透明度のみ
ライセンス: MIT または CC0 条項
アクセシビリティラッパー: role、aria-live、aria-busy

SVG ベースのエクスポートは、純粋な CSS エクスポートよりも滑らかで複雑な形状をレンダリングします。トレードオフは、余分なファイルの重さと、ほとんどのプロジェクトが二度と触れることのないストロークレベルのマークアップです。

WCAG は、インタラクションによって引き起こされるモーションコントロールを、最もオプションのレベルであるレベル AAA に挙げていますが、それが防御する前庭機能障害は、米国の 40 歳以上の成人の 35.4% に影響を与えています。

プリセットのスピナーやバー以外のものは、カスタムのマルチステップタイミング用に構築された専用のキーフレームアニメーションジェネレーターに属します。

この CSS ローダー ジェネレーターの使用方法

ツールでできないこと

CSS ローダー ジェネレーターとは何ですか?

どのような種類の CSS ローダー アニメーションを生成できますか?

CSS のみ、SVG、およびハイブリッド レンダリング: CSS ローダー ジェネレーターがアニメーションを構築する方法

CSS ローダー アニメーションのブラウザ サポート

CSS ローダー ジェネレーターはどのようなカスタマイズ コントロールを提供しますか?

CSS ローダー ジェネレーターはどのような出力形式を提供しますか?

どの CSS ローダー ジェネレーター ツールを使用する価値がありますか?