Softonic

シンプルなCSSスピナー ジェネレーター

ステップ 1 / 2
次へ

最もシンプルなCSSスピナーは、空の要素1つと約10行のCSSで作れます。ここでサイズ、色、速度を選ぶと、余分なファイルなしで、すっきりとした最小限のローダーをコピーできます。

シンプルなスピナーの作り方

  1. 1

    最初は初期値のままにする

    60pxのリング、6pxの枠線、1秒の回転という初期値は、一般的なローダーとしてそのまま使えます。

  2. 2

    必要なものだけ変更する

    ほとんどのプロジェクトでは色だけ変えれば十分です。色の欄を使い、他はそのままにしてください。

  3. 3

    CSSをコピーする

    CSSのボックスの横にあるコピーを押します。

  4. 4

    要素を1つ追加する

    スピナーを表示したい場所に、クラス loader を付けた空のdivを置きます。

このスピナーがシンプルな理由

多くのローダーは、入れ子になった複数の要素、背景画像、スクリプトを使います。このスピナーは、円として整えられた div 1つだけです。リングは枠線で作られ、枠線の上側だけ色が違います。円を回転させると、その色の付いた部分が周囲を移動します。手法は次の4つの考え方だけです。

  1. 幅と高さが等しい正方形の箱。
  2. border-radius: 50% で箱を円にする。
  3. 片側だけ色を付けたグレーの枠線を、border-top-color で設定する。
  4. 決して止まらない回転アニメーション。

完全なコード

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

<div class="loader"></div>

ローダーはこれで全部です。ダウンロードするものも、更新が必要な依存関係もありません。

中央に配置する

リングは通常のブロック要素です。ページや親要素の中で中央に置くには、横方向の中央揃えなら .loader に margin: 0 auto; を追加します。または親要素をflexコンテナにします。

.loading-area {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

このツールができないこと

  • 作るのはリングのスタイルだけです。ドットの列、バー、パルス型のローダーは別のデザインです。
  • トラックの色は明るいグレーに固定されています。背景が暗い場合は、貼り付けたCSSで変更してください。
  • マークアップにアクセシビリティの属性は追加されません。role="status" と aria-label は、要素にご自身で追加してください。

コピー後の細かな調整

スピナーは少数のプロパティだけでできているため、編集は簡単です。リングを軽く見せたい場合は枠線の幅を小さくします。落ち着いた印象にしたい場合はアニメーション時間を長くします。同じローダーを2つのサイズで使うなら、クラスを1回コピーして、2つ目のクラスで width、height、border-width だけを上書きします。コードを短く保てることが、シンプルなスピナーの最大の利点です。全体を一目で読めて、ライブラリを探さずに好きな値を変えられます。

トラックの色を変えたい場合は、#eee をページに合う色に変更できます。動く弧は、ジェネレーターで選んだ色のままです。

よくある質問

生成されるスピナーは、10行のクラスと3行の@keyframesルールを使います。それだけで動作するローダーになります。

いいえ。リングは枠線と回転で描かれるため、読み込む画像ファイルやアイコンはありません。

幅と高さは等しい必要があります。このジェネレーターは両方に同じサイズを使うため、楕円になる場合は、プロジェクト内の別のルールがどちらかを上書きしている可能性が高いです。

生成される要素は空です。テキストを横に置いたり、両方を1つのコンテナで囲んだりできますが、リングそのものは枠線で描かれた円にすぎません。

関連ツール

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

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

使い方ガイドと活用例