メインコンテンツへスキップ

スピナー(Spinners) v5.0.0-alpha1設定変更

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

目次

概要(About)

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

アクセシビリティのために、各ローダーには role="status"<span class="visually-hidden">Loading...</span> を含めること。

 

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

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

見本
Loading...
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-onlyspan.visually-hidden

カラー(Colors)

回転型スピナーは、border-colorcurrentColor を使用。つまり、テキストカラーユーティリティで色のカスタマイズが可能。下の見本は青色の回転型スピナー。

見本
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-border text-primary" role="status">
	<span class="visually-hidden">Loading...</span>
</div>

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

色の種類

Loading...
.text-primary

Loading...
.text-secondary

Loading...
.text-success

Loading...
.text-danger

Loading...
.text-warning

Loading...
.text-info

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

Loading...
.text-dark

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

Loading...
.text-body

Loading...
.text-muted

Loading...
.text-black-50

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

【設定】
  • .spinner-border.text-{themecolor}定義済みの文字色)を追加
  • カスタムCSSで文字色を設定しても可

 

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

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

見本
Loading...
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-onlyspan.visually-hidden

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

色の種類

Loading...
.text-primary

Loading...
.text-secondary

Loading...
.text-success

Loading...
.text-danger

Loading...
.text-warning

Loading...
.text-info

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

Loading...
.text-dark

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

Loading...
.text-body

Loading...
.text-muted

Loading...
.text-black-50

Loading...
.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)

※実際に使用する場合、HTML、JSともReloadの設定部分は不要。

 

配置(Alignment)

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

空白(Margin)

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

見本
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-border m-5" role="status">
	<span class="visually-hidden">Loading...</span>
</div>
【設定】

位置(Placement)

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

1. Flexユーティリティを使用(Flex)

見本(中央に配置)
Loading...
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>
【設定】

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

見本(横の配置ユーティリティに追加)
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="clearfix">
	<div class="spinner-border float-end" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
</div>
見本(横の配置ユーティリティで囲む)
Loading...
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設定変更

見本
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="text-center">
	<div class="spinner-border" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
</div>
【設定】
【注意】
  • .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 を使用

見本
Loading...
Loading...
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やインラインスタイルを使用して、必要に応じて大きさを変更。

見本
Loading...
Loading...
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 を調整しスピナーを配置。

見本
Loading...
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>

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

見本
Loading...
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>
【設定】

 

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