CSSローダージェネレーター

このツールとは？

CSSローダーとは、回転リング、バウンドするドット、パルスする円、動くプログレスバーなど、コンテンツが読み込み中であることを示す小さなアニメーション要素です。JavaScriptのアニメーションループも画像やGIFも不要で、いくつかのCSSルールと、要素の変化を時間軸で定義する@keyframesブロックだけで作られています。

このツールは実際に動作する4種類の定番ローダーパターンを生成します——ボーダーを使った回転スピナー、順番にバウンドする3つのドット、拡大縮小するパルス円、スライドする塗りつぶしを持つバー。ライブプレビューでサイズ・色・時間を調整し、生成されたCSSと、それを適用する最小限のHTML要素をコピーしてください。

出典：CSS Animations Level 1, W3C — これらのローダーの土台となる@keyframesとアニメーションプロパティを定義する仕様です。

なぜこれを使うのか？

• スタイル・サイズ・色・速度を変更するとライブプレビューがリアルタイムでアニメーションし、実際に使う見た目をそのまま確認できます。
• @keyframesブロックを含む完全なCSSを生成——自分で仕上げる必要のある断片ではありません。
• CSSが想定するHTMLもそのまま出力するので、クラス名や要素構造を推測する必要がありません。
• スピナー・ドット・パルス・バーの4種類のアニメーションパターンで、代表的なローディング表示のユースケースをカバーします。
• 純粋なCSSアニメーション——JavaScriptも画像素材も不要で、アニメーションGIFより軽量で滑らかです。
• すべてブラウザ内で完結し、無料・登録不要です。

使い方

1. ローダーのスタイルを選びます：回転リング、バウンドドット、パルス円、プログレスバー。
2. サイズのスライダーをドラッグしてローダーを拡大・縮小します。
3. 色を選びます——回転する縁、ドット、バーの塗りつぶしなど、ローダーのアクセントカラーになります。
4. 速度を調整してアニメーションを速く・遅くします。多くのUIローダーは1サイクル0.6〜1.5秒あたりが自然に見えます。
5. 生成されたCSSをスタイルシートにコピーし、ローダーを表示したい場所にHTMLコードを貼り付けます。

例

入力

スタイル：回転リング · サイズ：40px · 色：オレンジ · 速度：1.0s

出力

.css-loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: css-loader-spin 1s linear infinite;
}

@keyframes css-loader-spin {
  to { transform: rotate(360deg); }
}

定番のリングスピナー：円の三辺をほぼ透明のボーダーに、残る一辺だけを塗りつぶし色にして、線形の無限アニメーションで回転し続けます。

アニメーションGIFではなくCSSローダーを使う理由

アニメーションGIFのスピナーは長年デフォルトの選択肢でしたが、今日ではCSSローダーの方がほぼ常に優れています。バイナリの画像ファイルではなく数百バイトのテキストで済み、ボーダーとtransformで描画されるため拡大してもピクセル化せず、色を変えるのに新しい画像を書き出す必要もなくCSSの値ひとつで済みます。

ここで紹介するスピナー・ドット・パルス・バーの4スタイルは、ボタンのローディング状態から全画面オーバーレイまで、実際のUIで最もよく使われるものでもあります。いずれもkeyframesではtransformとopacityしか変化させないため、ブラウザはページの他の部分を邪魔せずGPU上で滑らかにアニメーションできます。

場面に合わせたスタイル選び

• 回転リング：最も汎用的でニュートラルな選択——ボタン内や小さなインラインのローディング表示に向いています。
• バウンドドット：軽快で遊び心のある印象になり、チャットの「入力中…」表示や短い待ち時間によく使われます。
• パルス円：単一要素のローディング表示や「アクティブ／ライブ」状態のドットとして適しています。
• プログレスバー：正確な割合がなくても前進している印象を与え、ページ読み込みや複数ステップの処理でよく期待されます。

プロジェクトでの使い方

生成されたCSSを一度スタイルシートに貼り付けたら、あとはローディング状態が必要な場所——フォーム送信中のボタン内、データ取得中のカード上、あるいは全画面オーバーレイの中央——でHTMLコードを使い回すだけです。アニメーションは純粋なCSSなので、DOMに要素を追加・削除するか、display: noneで非表示にするだけで簡単にオン・オフできます。

→ Box Shadow ジェネレーター · CSSミニファイア

よくある質問