スピナー～Bootstrap5設置ガイド

概要（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 を使用。つまり、テキストカラーユーティリティで色のカスタマイズが可能。下の見本は青色の回転型スピナー。

見本

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

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

標準のスピナーでは、テキストカラーユーティリティを使用すること。

色の種類

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

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

.text-dark

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

.text-body

.text-muted

.text-black-50

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

【設定】

.spinner-border に .text-{themecolor}（定義済みの文字色）を追加
カスタム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

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

色の種類

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

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

.text-dark

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

.text-body

.text-muted

.text-black-50

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

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

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

【設定】

.spinner-grow に .text-{themecolor}（定義済みの文字色）を追加
カスタムCSSで文字色を設定しても可

ロードの実例 ※裏技

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

See the Pen News ticker on Bootstrap5 carousel (vertical slide) 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 class="btn btn-primary" type="button" disabled>
	<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
	<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
	<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
	Loading...
</button>
<!-- 小さめのボタンの場合 -->
<button class="btn btn-primary btn-sm" type="button" disabled>
	<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
	Loading...
</button>
<!-- 大きめのボタンの場合 -->
<button class="btn btn-primary btn-lg" type="button" disabled>
	<span class="spinner-border" role="status" aria-hidden="true"></span>
	Loading...
</button>

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

見本

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

<button class="btn btn-primary" type="button" disabled>
	<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
	<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
	<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
	Loading...
</button>
<!-- 小さめのボタンの場合 -->
<button class="btn btn-primary btn-sm" type="button" disabled>
	<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
	Loading...
</button>
<!-- 大きめのボタンの場合 -->
<button class="btn btn-primary btn-lg" type="button" 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]）にする

インプットに設定（With inputs）v5.0.0-alpha1新設

<button> や他の要素とは異なり、<input> にはHTMLを含められない。そのため、Bootstrapの .form-control インプットにスピナーを配置するには、絶対配置を <input> の上に設定する必要がある。

.form-control-with-spinner クラスを使用して、<input> とスピナーを親の <div> で囲む。クラスはインプットの padding-right を調整しスピナーを配置。

見本

スピナー付きのインプット

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

<label for="exampleWithSpinner" class="form-label">スピナー付きのインプット</label>
<div class="form-control-with-spinner">
	<input type="text" class="form-control" id="exampleWithSpinner" value="Spinning...">
	<div class="spinner-border spinner-border-sm" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
</div>

これは放射型スピナーでも機能。

見本

スピナー付きのインプット

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

<label for="exampleWithSpinner2" class="form-label">スピナー付きのインプット</label>
<div class="form-control-with-spinner">
	<input type="text" class="form-control" id="exampleWithSpinner2" value="Spinning...">
	<div class="spinner-grow spinner-grow-sm" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
</div>

【設定】

フォームのインプット・コントロールの後にスピナーの設定をし、コントロール全体を div.form-control-with-spinner で囲む

Sass v5.0.0-beta3追加

変数（Variables）

デフォルトの設定

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-alpha1設定変更

概要（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の設定例 緑背景が変更箇所

【設定】

ロードの実例 ※裏技

配置（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の設定例 緑背景が変更箇所

【設定】

【注意】

インプットに設定（With inputs）v5.0.0-alpha1新設

見本

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

見本

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

【設定】

Sass v5.0.0-beta3追加

変数（Variables）

デフォルトの設定

キーフレーム（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の設定例緑背景が変更箇所

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

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