Softonic

オーバーレイスピナー CSS ジェネレーター

ステップ 1 / 2
次へ

ローディングオーバーレイは、半透明の層でページを覆い、中央にスピナーを置きます。ここでスピナーを生成し、以下の短いラッパーのCSSを追加して、コンテンツの上で中央に配置してください。

オーバーレイスピナーの作り方

  1. 1

    大きめのサイズを選ぶ

    サイズ欄に70〜90、太さ欄に6〜8を入力し、ページ全体の上でもスピナーが見やすくなるようにします。

  2. 2

    強い色を選ぶ

    オーバーレイの背景の上で目立つ弧の色を選びます。

  3. 3

    生成されたCSSをコピーする

    コピーボタンで、ローダーと@keyframesのルールをコピーします。

  4. 4

    ラッパーを追加する

    このページのオーバーレイのルールを貼り付け、ローダーをラッパーの内側に入れます。

2つの部分：スピナーとオーバーレイ

ジェネレーターが作るのはスピナーです。.loader クラスと @keyframes spin ルールです。オーバーレイは別のラッパーで、ご自身で追加します。ラッパーはビューポート全体を覆い、子要素を中央に配置します。この分け方なら、同じスピナーをボタンやカードでも再利用でき、画面全体を操作できなくする必要があるときだけラッパーを使えます。

ラッパーのCSS

生成されたルールの後に、次を貼り付けます。

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1000;
}

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

inset: 0 を付けた position: fixed により、層は画面の四辺いっぱいに広がります。flexの設定でスピナーを縦横の中央に配置します。z-index によって、層が通常のコンテンツより前面に表示されます。ヘッダーやモーダルがまだ上に見える場合は、この値を大きくしてください。

ページ全体ではなく一部の領域を覆う

カードやテーブルだけが読み込み中の場合は、そのコンテナに position: relative を設定し、ラッパーを position: absolute に変更します。

.panel { position: relative; }
.panel .overlay { position: absolute; }

ページの残りの部分は操作できたままで、そのパネルだけが暗くなります。

ページに合わせてオーバーレイの色を選ぶ

ページの背景 オーバーレイの背景 弧の色
白 rgba(255, 255, 255, 0.75) ブランドカラー
暗い rgba(0, 0, 0, 0.6) 明るく鮮やかな色

暗いページでは、貼り付けたローダーのCSSにあるトラックの色 #eee も変更し、リングが強く光りすぎないようにしてください。

良い使い方

  • 作業が終わったらすぐにオーバーレイを削除してください。削除しないとページが操作できないままになります。
  • 短い待ち時間に使ってください。長い処理の場合は、何が起きているかを説明するテキストを表示します。
  • オーバーレイとフォーカスの扱いはご自身のマークアップです。このツールが出力するのはスピナーだけです。

ページのスクロールを止める

固定のオーバーレイはページを隠しますが、その奥のページはホイールやタッチでまだスクロールできます。それが問題になる場合は、オーバーレイの表示中だけ body に overflow: hidden; を追加し、オーバーレイが消えるときに削除してください。このルールは、オーバーレイを表示・非表示にする瞬間と必ず一緒に切り替えて、両者がずれないようにします。

よくある質問

いいえ。作るのはスピナーのCSSだけです。オーバーレイのラッパーは、このページに示したCSSを数行追加するだけで、それをスピナーの横に貼り付けます。

ラッパーを inset: 0 で固定し、display: flex に align-items: center と justify-content: center を組み合わせます。これでスピナーが中央に配置されます。

他の要素の重なり順が高いためです。オーバーレイの z-index をその要素より大きくしてください。

はい。画面全体を覆う固定の層が、その下の要素の代わりにクリックを受け取ります。読み込み中はこれが通常の目的です。

関連ツール

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データクラスを生成します。

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

使い方ガイドと活用例