Softonic

ボタン用スピナー CSS ジェネレーター

ステップ 1 / 2
次へ

ボタンの中のスピナーは、クリックが受け付けられたこと、そして再度押す必要がないことを伝えます。ここで小さく細いリングを生成し、CSSをコピーしてボタンのラベルの横に配置してください。

ボタン用スピナーの作り方

  1. 1

    小さいサイズを使う

    サイズの欄に16または18を入力し、リングがボタンの文字の高さに収まるようにします。

  2. 2

    リングを細くする

    太さを2に設定し、このサイズでも弧がくっきり見えるようにします。

  3. 3

    色を合わせる

    動く弧の色を選びます。例えば濃い色のボタンなら白です。

  4. 4

    少し速くしてコピーする

    1回転あたり0.8秒にしてから、CSSをコピーします。

作業例

濃い青の「保存」ボタンに白い文字がある場合を考えます。ジェネレーターで、サイズを16、太さを2、色を #ffffff、速度を0.8に設定します。ツールは次のCSSを出力します。

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid #eee;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

トラックは固定の明るいグレーなので、濃いボタンの上でも見えます。トラックをもっと控えめにしたい場合は、貼り付けたCSSの #eee を rgba(255, 255, 255, 0.3) のような半透明の値に変更してください。弧の色は、選んだ色のままです。

ボタンの中に配置する

スピナーの要素をラベルの前に置き、ボタンを柔軟なレイアウトにして、間隔を空けて1行に並べます。

<button class="save" type="submit" disabled>
  <span class="loader" role="status" aria-label="保存中"></span>
  保存中
</button>

.save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

スピナーと disabled の状態は、リクエストの実行中だけ追加してください。終わったら両方を削除します。二重送信を防ぐのはボタンの無効化であり、スピナーはその理由を示す合図です。

ボタン向けのサイズと太さ

ボタンの文字サイズ スピナーのサイズ 太さ
14px 14px 2px
16px 16〜18px 2px
18〜20px 20〜24px 3px

注意点

  • ジェネレーターが作るのは円形のリング1つだけです。ボタン自体は作らないので、ボタンのスタイルはそのまま使えます。
  • 直径の4分の1より太いリングは塗りつぶされたように見えるため、小さいサイズでは細い値を使ってください。
  • スピナーの横にはラベルを置いてください。テキストのないスピナーは、一部の利用者には意味が分かりにくくなります。

レイアウトのずれを防ぐ

スピナーが表示された瞬間にボタンの幅が広がると、レイアウトがずれてクリック位置が動いてしまいます。簡単な対策が2つあります。1つ目は、スピナーと長いラベルの両方が収まる最小幅をボタンに設定することです。2つ目は、ラベルの前に16pxの空のプレースホルダーを表示して、最初からスピナーの場所を確保することです。生成されるリングは幅と高さがピクセルで固定されているため、必要な空間を正確に確保しやすくなっています。

よくある質問

ボタンの文字の高さとほぼ同じ、通常は14〜20pxです。そうすればスピナーが表示されてもボタンが大きくなりません。

ほとんどのフォームでは、はい。無効化すると二重送信を防げます。また、スピナーが他の要素をクリックできない理由を訪問者に説明します。

トラックは明るいグレーで、弧は選んだ色になります。明るいボタンでは、より濃い弧の色を選び、貼り付けたCSSでトラックの色も変更してください。

いいえ。ジェネレーターが出力するのはリングのCSSだけです。ラベルを残すか、変更するか、非表示にするかは、あなたのマークアップで決めてください。

関連ツール

Webpack設定ジェネレーター

素の JavaScript、React、Vue 向けに webpack 5 の webpack.config.js を生成します。TypeScript、Babel、CSS や Sass、画像、HtmlWebpackPlugin、開発サーバー、npm install のコマンドまでそろいます。

カラーティントジェネレーター

ベースカラーの明るい色合いを生成します。デザイン システム トークン、背景、ホバー状態を 3 ～ 20 段階でスケールします。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

.gitignore ジェネレーター

Laravel、Node.js、Python、Rails のプロジェクト用除外ルールを組み合わせます。結果をコピーするか、.gitignore 入りの ZIP をダウンロードできます。個人用ルールは別に表示します。

16進数から10進数への変換ツール

16進数を10進数（10進法）に変換します。メモリアドレス、エラーコード、RGBチャンネル、任意精度の整数に対応します。

JSONからPythonデータクラスへの変換

JSONから、型ヒント、オプションフィールド、ネストされたクラス、およびdataclasses-jsonまたはPydanticサポートを備えたPythonデータクラスを生成します。

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

使い方ガイドと活用例