Softonic

CSSローディングアニメーション生成ツール

ステップ 1 / 2
次へ

スピナーは、何かが進行中であることをユーザーに伝えます。このツールが生成するのは円形のCSSスピナーひとつです。直径、枠の太さ、アクセントカラー、回転速度を設定して、ライブプレビューで確認し、CSSをコピーしてください。すべて純粋なCSSで、SVGもJavaScriptも外部ライブラリも使いません。

使い方

  1. 1

    サイズを設定する

    スピナーの直径（ピクセル）。40〜80pxが、ほとんどのボタンやコンテンツ領域に合います。

  2. 2

    枠の太さを設定する

    リングは円に描いた枠線です。太くすると弧がくっきりします。直径60pxなら4〜8pxがちょうどよい太さです。

  3. 3

    色を選ぶ

    回転する弧のアクセントカラー。弧を目立たせるため、リングの残りは薄いグレーのままです。

  4. 4

    速度を設定してCSSをコピーする

    1回転にかかる秒数。一般的には約1秒が最適で、500ミリ秒未満だとせわしなく、2秒を超えると鈍く感じられます。

生成されるCSSの仕組み

.loader {
  width: 60px;
  height: 60px;
  border: 6px solid #eee;
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

スピナーは太い枠線で描かれた円です。border-top-color がリングの上部だけをアクセントカラーで塗るため、リングが弧として見えます。@keyframes spin がその弧を中心の周りで回転させます。transform: rotate() による回転は、ブラウザが要素をコンポジタ上で動かすだけなので、フレームごとに再描画する場合より軽量です。

ページに表示するには、要素を1つ追加してCSSを読み込んでください：

<div class="loader" role="status" aria-label="読み込み中"></div>

アクセシビリティを確保する

  • role="status" を付けると、スクリーンリーダーがスピナーを読み上げます。
  • aria-label には状態を示すテキストを入れます。例：「読み込み中」。
  • タイムアウト時のフォールバックなしに、スピナーの裏でコンテンツを数秒以上隠さないようにします。
  • prefers-reduced-motion を尊重します。アニメーションを減らす設定のユーザーには、回転をシンプルなフェードや静的な「読み込み中…」のテキストに置き換えましょう：
@media (prefers-reduced-motion: reduce) {
  .loader { animation: none; background: currentColor; opacity: .4; }
}

スピナーを使うべきとき、楽観的UIを使うべきとき

  • 応答が100ミリ秒未満：スピナーは不要です。人間の目にはその遅延はほとんど感じられません。
  • 100ミリ秒〜1秒：控えめなスピナー（小さな円、ボタンの「読み込み中…」表示）で二重クリックを防ぎます。
  • 1秒〜10秒：目立つスピナーを使い、測定できるなら進捗を示すのが理想です。
  • 10秒超：これはスピナーで解決する問題ではありません。何が遅いのかを突き止めて直しましょう。

フォーム送信やボタンクリックでは、全画面のオーバーレイより、ボタン内に収まるスピナーのほうが適していることが多いです。

よくある質問

シンプルな単一要素のスピナー（4辺のボーダーを回す手法）にはCSSが向いています。先細りの軌跡、複数の stroke-dasharray アニメーション、筆で描いたような塗りつぶしのセグメントが必要なときはSVGです。CSSは軽くてシンプル、SVGはより柔軟です。

おそらく大きな要素を回転させているか、合成されないプロパティをアニメーションさせているためです。スピナーは小さく保ち、transform: rotate()（top や margin ではなく）を使い、ほかの重いアニメーションが動いている間は起動しないようにしましょう。

ほぼ例外なく時計回りです。反時計回りはどことなく違和感があります。現実の回転の手がかり（時計や風車）の多くが時計回りだからです。特別な理由がない限り、慣習に従いましょう。

JavaScriptで setTimeout(..., 300) を使ってローダーのクラスを付け、処理が先に終わった場合は clearTimeout でキャンセルします。こうすれば、速い応答でのちらつきを防ぎつつ、本当の遅延は隠さずに済みます。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

HTML 圧縮ツール

通常のコメントを削除し、空白を整理して、ブラウザ内で HTML をコンパクトにします。使用前に結果を確認してください。

Markdownリンク生成ツール

URLとアンカーテキストからMarkdownリンクの記法を生成します。タイトルのツールチップや、長い文書を読みやすく整える参照形式のリンクにも対応しています。

このツールは他の言語でも利用できます