Softonic

ローディングスピナー CSS ジェネレーター

ステップ 1 / 2
次へ

ローディングスピナーは、ページ、パネル、ボタンがまだ処理中であることを訪問者に示します。以下でサイズ、リングの太さ、色、速度を設定し、プレビューを確認してから、完成したローディングスピナーのCSSをスタイルシートにコピーしてください。

ローディングスピナーのCSSを入手する方法

  1. 1

    サイズを選ぶ

    直径をピクセル単位で入力します。コンテンツ領域では40〜60程度、インラインで使う場合はそれより小さくします。

  2. 2

    太さと色を選ぶ

    リングの太さをピクセル単位で設定し、色の欄で動く弧の色を選びます。

  3. 3

    速度を設定する

    1回転にかける秒数を入力します。1が一般的な初期値です。

  4. 4

    CSSをコピーする

    CSSのボックスの横にあるコピーボタンを使い、ルールをスタイルシートに貼り付けます。

得られるもの

ジェネレーターは2つのルールを出力します。.loader クラスと @keyframes spin ブロックです。クラスは円を描き、その円に明るいグレーのリングを与え、リングの上端に色を付けます。キーフレームは円を1回転させ、animation の行がそれを永遠に繰り返します。画像ファイル、アイコンフォント、スクリプトは不要です。

初期値（60px、6pxのリング、#10b981、1秒）の場合、出力は次のようになります。

.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); }
}

ページに追加する

CSSをスタイルシートに貼り付け、ローダーを表示したい場所に空の要素を1つ置きます。

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

処理の実行中は要素を表示し、コンテンツが届いたら要素を削除するか、display: none で非表示にします。role と aria-label の属性により、スクリーンリーダーが状態を読み上げられるようになります。

適切なサイズ

配置場所 サイズ 太さ
小さいボタンの中 16〜20px 2px
テキスト1行の横 20〜28px 3px
カードやパネル 40〜60px 4〜6px
空のページの中央 60〜100px 6〜8px

目安として、太さは直径の約10分の1にします。それより細いと高解像度の画面でかすれて見え、太すぎるとリングが塊のように見えます。

注意点

  • トラックの色は明るいグレー（#eee）に固定されています。背景が暗い場合は、貼り付けたCSSでこの値を変更してください。
  • ツールが作るのは円形のスピナー1つだけです。ドット、バー、その他の形状には、別のマークアップが必要です。
  • プロジェクトにすでに loader というクラス名や spin というアニメーション名がある場合は、貼り付けたCSSでその名前を変更し、ルールが衝突しないようにしてください。

表示と非表示の切り替え

ローディングスピナーは、処理が始まったときに表示され、終わったときに消えるべきです。簡単なパターンは、要素に hidden 属性を付けておき、リクエストが始まったときに削除する方法です。待ち時間が通常とても短い場合は、数百ミリ秒の小さな遅延を加えて、すぐに返ってくる応答でスピナーが一瞬だけ点滅しないようにします。どの方法を選ぶ場合でも、エラーの場合にもスピナーを必ず非表示にしてください。そうしないと、すでに失敗したものを訪問者が待ち続けることになります。

よくある質問

はい。出力は1つのクラスと1つの@keyframesルールだけの通常のCSSなので、どのバックエンドでも、どのスタイルシートやstyleブロックでも動作します。

初期状態では要素を非表示にしておき、リクエストが始まったときに表示します。リクエストが終わったら再び非表示にします。それはご自身のコードでクラスの切り替えか、hidden属性で制御します。

生成されるCSSは、円の上端の境界線だけに色を付けます。円が回転すると、その色の付いた1本の弧が明るいグレーのリングの上を移動し、回転しているように見えます。

はい。どの値も通常の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データクラスを生成します。

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

使い方ガイドと活用例