CSS ローダー生成ツール

CSS ローダー生成ツールとは？

CSS ローダー生成ツールは、ライブラリを取り込まずに純粋な CSS のローディングインジケーターが欲しいウェブデザイナーやフロントエンド開発者向けの無料のブラウザ内ツールです。スピナー・リング・ドット・バー・パルスの 5 種類から選び、ピクセル単位のサイズ、メインの色、1 サイクルの秒数、線の太さ、ドットやバーの数を調整できます。編集中はプレビューがアニメーションし、対応する HTML マークアップと @keyframes を含む CSS の style ブロックが即座に更新されるので、そのままページに貼り込めます。ボタン、ページローダー、スケルトン表示、非同期のプレースホルダーに使えるほか、CSS アニメーションと @keyframes が各効果をどう動かすかを学ぶのにも役立ちます。

CSS ローダー生成ツールの使い方

1. ローダーのスタイルを選びます：スピナー・リング・ドット・バー・パルス。
2. ピクセル単位でサイズを設定し、色チップで選ぶか値を入力して色を決めます。
3. 1 サイクルのアニメーション速度を秒で設定します。
4. 「設定」を開いて線の太さ（スピナーとリング）やドット・バーの数を調整します。
5. プレビューのアニメーションを確認し、コピーボタンで生成された HTML と CSS をコピーします。

使用例

スタイル：スピナー、サイズ 48px、色 #4f86f7、速度 1s、太さ 5px

.dd-loader { width: 48px; height: 48px; border: 5px solid color-mix(in srgb, #4f86f7 25%, transparent); border-top-color: #4f86f7; border-radius: 50%; animation: dd-loader-spin 1s linear infinite; }

スタイル：ドット、サイズ 48px、色 #9333ea、速度 1s、数 3

<div class="dd-loader"><div></div><div></div><div></div></div> 各ドットに段階的な animation-delay を付け、波のように拡大縮小します。

よくある質問

どんなローダーのスタイルがありますか？

5 種類です：スピナー（回転する弧）、リング（より太い回転するリング）、ドット（波のように拡大縮小する点）、バー（上下に伸縮する棒）、パルス（脈動する単一の円）。スタイルメニューで切り替えるとプレビューとコードが即座に更新されます。

サイズ・色・速度のコントロールは何をしますか？

サイズはローダーのピクセル寸法を、色はメインの色を設定し（色チップで選ぶか任意の CSS 色を入力）、速度は 1 サイクルの秒数です。太さはスピナーとリングの線を、数はドットやバーの表示個数を制御します。

生成される CSS は JavaScript を含まない純粋な CSS ですか？

はい。スニペットは通常の HTML と、CSS アニメーション・@keyframes を使う <style> ブロックなので、JavaScript や外部ライブラリなしで動作します。ページに貼り付ければ単体で機能します。

なぜ太さと数はすべてのスタイルを変えないのですか？

太さはスピナーとリング（枠線を描く）にだけ効き、数はドットとバー（複数の要素を描画する）にだけ効きます。他のスタイルはそれらを無視するので、選んだスタイルの出力が無駄なく保たれます。

サーバーに何かアップロードされますか？

いいえ。ローダーとその CSS はローカルの文字列演算でブラウザ内で完結します。設定・色・コードがサーバーに送信されることは一切ないため、オフラインでも動作し、作業内容のプライバシーが保たれます。