スピナー（Spinners） v5.0.0設定変更

コンポーネントまたはページのロード状態を示すBootstrapのスピナーは、HTML、CSS、JavaScriptなしで完全に構築されている。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。

このページの項目 v5.0.0設定変更

概要（About）

Bootstrapの「スピナー」を使用して、プロジェクトの読み込み状態を表示できる。HTMLとCSSだけで構築されているため、JavaScriptを作成する必要はない。ただし、可視性を切り替えるには任意のJavaScriptが必要。外観、配置、サイズは、Bootstrapの各ユーティリティクラスで簡単にカスタマイズできる。

アクセシビリティのために、各ローダーには role="status" と <span class="visually-hidden">Loading...</span> を入れて下さい。

このコンポーネントのアニメーション効果は、prefers-reduced-motion メディアクエリに依存。詳細はアクセシビリティのモーションを小さくするに記載。

回転型スピナー（Border spinner）v5.0.0-alpha2設定変更

軽量なローディングインジケーターとして、回転型スピナーを使用。

見本

Bootstrap5.xの設定例緑背景が変更箇所

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

※Bootstrap4.xの設定例赤背景が変更箇所

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

【設定】

div.spinner-border > span.visually-hidden > Loading...（ロード中を示す）

【アクセシビリティの設定】

.spinner-border には role="status" 属性（支援技術にある種の更新された状態を伝える）を入れる
ロード中を示すテキストはユーザー補助用に span.visually-hidden で囲むこと

【変更履歴】

【v5.0.0-alpha2】
- span.sr-only ⇒ span.visually-hidden

カラー（Colors）

回転型スピナーは、border-color に currentcolor を使用。つまり、テキストカラーユーティリティで色のカスタマイズができる。デフォルトのスピナーでは、テキストカラーユーティリティをご使用下さい。

色の種類

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light※色が見やすいように背景色と空白をつけています

.text-dark

.text-blackv5.1.0追加

.text-white※色が見やすいように背景色と空白をつけています

.text-body

.text-muted

Bootstrap5.xの設定例緑背景が変更箇所

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

【設定】

.spinner-border に .text-{color}（文字色ユーティリティクラス）を追加
カスタムCSSで文字色を設定しても可

なぜ border-color ユーティリティを使用しないのか？ それぞれの回転型スピナーは、少なくとも一辺のボーダーを transparent（透過）に指定しているので、.border-{themecolor} ユーティリティではそれを再定義してしまうから。

放射型スピナー（Growing spinner）v5.0.0-alpha2設定変更

回転型スピナーが気に入らない場合は、放射型スピナーに切り替え。技術的には回転しないが、繰り返し放射する。

見本

Bootstrap5.xの設定例緑背景が変更箇所

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

※Bootstrap4.xの設定例赤背景が変更箇所

<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

【設定】

div.spinner-grow > span.visually-hidden > Loading...（ロード中を示す）

【アクセシビリティの設定】

.spinner-grow には role="status" 属性（支援技術にある種の更新された状態を伝える）を入れる
ロード中を示すテキストはユーザー補助用に span.visually-hidden で囲むこと

【変更履歴】

【v5.0.0-alpha2】
- span.sr-only ⇒ span.visually-hidden

このスピナーも background-color が currentcolor で構築されているので、テキストカラーユーティリティでその外観を簡単に変更。ここでは、サポートされているバリエーションとともに青色で表示。

色の種類

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light※色が見やすいように背景色と空白をつけています

.text-dark

.text-blackv5.1.0追加

.text-white※色が見やすいように背景色と空白をつけています

.text-body

.text-muted

Bootstrap5.xの設定例緑背景が変更箇所

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

【設定】

.spinner-grow に .text-{color}（文字色ユーティリティクラス）を追加
カスタムCSSで文字色を設定しても可

ロードの実例 ※裏技、v5.2.0JSファイルをES6に変更

「Run Pen」を押すと実行、「Reload」を押すと約3秒後に再表示。
参考：超簡単 javascriptとcssで作る簡易ローディング画面（無口@work）

See the Pen Bootstrap5 Spinner Loading(ES6) by cccabinet (@cccabinet) on CodePen.

※実際に使用する場合、HTML、JSとも「Reloadボタンの表示」部分は不要。

配置（Alignment）

Bootstrapのスピナーは、rem, currentcolor, display: inline-flex で構築されている。これにより簡単にサイズや色の変更、素早い調整ができる。

空白（Margin）

空白ユーティリティ（.m-5など）を使用すると、簡単にスペースを空けられる。

見本

Bootstrap5.xの設定例緑背景が変更箇所

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

【設定】

.spinner-{border|grow} に空白ユーティリティを追加して空白を調整

位置（Placement）

Flexboxユーティリティ、floatユーティリティ、text-alignユーティリティを使用して、スピナーを必要な場所に正確に配置できる。

1. Flexユーティリティを使用（Flex）

見本（中央に配置）

Bootstrap5.xの設定例緑背景が変更箇所

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
</div>

見本（ローディングと合わせて左右に配置）

Loading...

Bootstrap5.xの設定例緑背景が変更箇所

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

【設定】

.spinner-{border|grow} をFlexユーティリティで囲んで位置を調整

2. 横の配置ユーティリティを使用（Floats）v5.0.0-beta1設定変更

見本（横の配置ユーティリティに追加）

Bootstrap5.xの設定例緑背景が変更箇所

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

見本（横の配置ユーティリティで囲む）

Bootstrap5.xの設定例緑背景が変更箇所

<div class="float-end">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

【設定】

.spinner-{border|grow} に横の配置ユーティリティを追加するか、.spinner-{border|grow} を横の配置ユーティリティで囲んで位置を調整

【変更履歴】

【v5.0.0-beta1】
- RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
  - 行頭揃え：.float-left ⇒ .float-start
  - 行末揃え：.float-right ⇒ .float-end

3. 文字の配置ユーティリティを使用（Text align）v5.0.0-beta1設定変更

見本

Bootstrap5.xの設定例緑背景が変更箇所

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

【設定】

.spinner-{border|grow} を文字の配置ユーティリティで囲んで位置を調整

【注意】

.spinner-{border|grow} に文字の配置ユーティリティを追加しても機能しない

【変更履歴】

【v5.0.0-beta1】
- RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
  - 文字の行頭揃え：.text-left ⇒ .text-start
  - 文字の行末揃え：.text-right ⇒ .text-end

サイズ（Size）

.spinner-border-sm と .spinner-grow-sm を追加すると、他のコンポーネント内で迅速に使用できる小さめのスピナーが作成される。

1. `.spinner-{border|grow}-sm` を使用

見本

Bootstrap5.xの設定例緑背景が変更箇所

<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

2. カスタムCSSを使用

または、カスタムCSSやインラインスタイルを使用して、必要に応じて大きさを変更。

見本

Bootstrap5.xの設定例緑背景が変更箇所

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

【設定】

小さめ：.spinner-{border|grow} に .spinner-{border|grow}-sm を追加（{border|grow} の部分は統一すること）
カスタムCSS（rem単位）で大きさを設定しても可

ボタンに設定（Buttons）

ボタン内のスピナーを使用して、アクションが現在処理中か実行中であることを表示。また、スピナー要素からテキストを取り替えて、必要に応じてボタンテキストの使用もできる。

1. 回転型スピナーの場合

見本

Bootstrap5.xの設定例緑背景が変更箇所

<button type="button" class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button type="button" class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<!-- 小さめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-sm" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<!-- 大きめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-lg" disabled>
  <span class="spinner-border" role="status" aria-hidden="true"></span>
  Loading...
</button>

2. 放射型スピナーの場合

見本

Bootstrap5.xの設定例緑背景が変更箇所

<button type="button" class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button type="button" class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<!-- 小さめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-sm" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<!-- 大きめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-lg" disabled>
  <span class="spinner-grow" role="status" aria-hidden="true"></span>
  Loading...
</button>

【設定】

デフォルトのボタン：.btn.btn-(outline-){themecolor}[disabled] > span.spinner-{border|grow}.spinner-{border|grow}-sm[role="status"] + Loading...
小さめのボタン：.btn.btn-(outline-){themecolor}.btn-sm[disabled] > span.spinner-*.spinner-{border|grow}-sm[role="status"] + Loading...
大きめボタン：.btn.btn-(outline-){themecolor}.btn-lg[disabled] > span.spinner-*[role="status"] + Loading...
ボタンの文字をスピナーのみにする場合は、span.spinner-{border|grow}(.spinner-{border|grow}-sm)[role="status"] + Loading... を span.spinner-{border|grow}(.spinner-{border|grow}-sm)[role="status"] > span.visually-hidden > Loading... にする

【注意】

ロード中のボタンの状態は無効化（.btn[disabled]）にする

CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更

CSS変数（Variables）v5.2.0新設

Bootstrapの進化するCSS変数アプローチの一環として、スピナーは、リアルタイムのカスタマイズを強化するために、.spinner-border と .spinner-grow でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

回転型スピナー変数：

デフォルトの設定

scss/_spinners.scss 内 spinner-border-css-vars の設定--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-border-width: #{$spinner-border-width};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-border;

放射型スピナー変数：

デフォルトの設定

scss/_spinners.scss 内 spinner-grow-css-vars の設定--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-grow;

両方のスピナーで、小さめのスピナー修飾子クラスを使用して、必要に応じてこれらのCSS変数の値を更新。例えば、.spinner-border-sm クラスは次のことを行う：

デフォルトの設定

scss/_spinners.scss 内 spinner-border-sm-css-vars の設定--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

※.spinner-grow-sm の場合は、上2行のみを使用。

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 spinner-variables の設定$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

キーフレーム（Keyframes）

スピナーのCSSアニメーションを作成するために使用される。scss/_spinners.scss に組み込まれている。

デフォルトの設定

scss/_spinners.scss 内 spinner-border-keyframes の設定@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

scss/_spinners.scss 内 spinner-grow-keyframes の設定@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}

前のページ
スクロールスパイ

次のページ
トースト

スピナー（Spinners） v5.0.0設定変更

概要（About）

回転型スピナー（Border spinner）v5.0.0-alpha2設定変更

見本

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

【アクセシビリティの設定】

【変更履歴】

カラー（Colors）

色の種類

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

放射型スピナー（Growing spinner）v5.0.0-alpha2設定変更

見本

Bootstrap5.xの設定例 緑背景が変更箇所

※Bootstrap4.xの設定例 赤背景が変更箇所

【設定】

【アクセシビリティの設定】

【変更履歴】

色の種類

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

ロードの実例 ※裏技、v5.2.0JSファイルをES6に変更

配置（Alignment）

空白（Margin）

見本

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

位置（Placement）

1. Flexユーティリティを使用（Flex）

見本（中央に配置）

Bootstrap5.xの設定例 緑背景が変更箇所

見本（ローディングと合わせて左右に配置）

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

2. 横の配置ユーティリティを使用（Floats）v5.0.0-beta1設定変更

見本（横の配置ユーティリティに追加）

Bootstrap5.xの設定例 緑背景が変更箇所

見本（横の配置ユーティリティで囲む）

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

【変更履歴】

3. 文字の配置ユーティリティを使用（Text align）v5.0.0-beta1設定変更

見本

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

【注意】

【変更履歴】

サイズ（Size）

1. .spinner-{border|grow}-sm を使用

見本

Bootstrap5.xの設定例 緑背景が変更箇所

2. カスタムCSSを使用

見本

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

ボタンに設定（Buttons）

1. 回転型スピナーの場合

見本

Bootstrap5.xの設定例 緑背景が変更箇所

2. 放射型スピナーの場合

見本

Bootstrap5.xの設定例 緑背景が変更箇所

【設定】

【注意】

CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更

CSS変数（Variables）v5.2.0新設

デフォルトの設定

デフォルトの設定

デフォルトの設定

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

キーフレーム（Keyframes）

デフォルトの設定

ページ移動

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

※Bootstrap4.xの設定例赤背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

1. `.spinner-{border|grow}-sm` を使用

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所

Bootstrap5.xの設定例緑背景が変更箇所