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

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

スピナー(Spinners) v4.2.1新設

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

概要(About)

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

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

 

回転型スピナー(Border spinner)

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

見本
Loading...
設定例
<div class="spinner-border" role="status">
	<span class="sr-only">Loading...</span>
</div>

【設定】

  • div.spinner-border > span.sr-only > Loading...(ロード中を示す)

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

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

カラー(Colors)

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

見本
Loading...
設定例
<div class="spinner-border text-primary" role="status">
	<span class="sr-only">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)

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

見本
Loading...
設定例
<div class="spinner-grow" role="status">
	<span class="sr-only">Loading...</span>
</div>

【設定】

  • div.spinner-grow > span.sr-only > Loading...(ロード中を示す)

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

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

このスピナーも 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 ※色が見やすいように背景色と空白をつけています

設定例
<div class="spinner-grow text-primary" role="status">
	<span class="sr-only">Loading...</span>
</div>

【設定】

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

 

配置(Alignment)

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

空白(Margin)

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

見本
Loading...
設定例
<div class="spinner-border m-5" role="status">
	<span class="sr-only">Loading...</span>
</div>

【設定】

位置(Placement)

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

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

見本1
Loading...
設定例
<div class="d-flex justify-content-center">
	<div class="spinner-border" role="status">
	<span class="sr-only">Loading...</span>
</div>
</div>
見本2
Loading...
設定例
<div class="d-flex align-items-center">
	<strong>Loading...</strong>
	<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

【設定】

横の配置ユーティリティを使用(Floats)

見本1
Loading...
設定例
<div class="clearfix">
	<div class="spinner-border float-right" role="status">
	<span class="sr-only">Loading...</span>
</div>
</div>
見本2
Loading...
設定例
<div class="float-right">
	<div class="spinner-border" role="status">
	<span class="sr-only">Loading...</span>
</div>
</div>

【設定】

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

文字の配置ユーティリティを使用(Text align)

見本
Loading...
設定例
<div class="text-center">
	<div class="spinner-border" role="status">
	<span class="sr-only">Loading...</span>
</div>
</div>

【設定】

【注意】

  • .spinner-{border|grow} に文字の左寄せ/右寄せ/中央揃えユーティリティを追加しても機能しない

 

サイズ(Size)

.spinner-border-sm.spinner-grow-sm を追加すると、他のコンポーネント内ですばやく使用可能な小さめのスピナーが作成される。

見本1
Loading...
Loading...
設定例
<div class="spinner-border spinner-border-sm" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
	<span class="sr-only">Loading...</span>
</div>

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

見本2
Loading...
Loading...
設定例
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
	<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
	<span class="sr-only">Loading...</span>
</div>

【設定】

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

 

ボタンに設定(Buttons)

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

見本1(回転型スピナーの場合)
設定例
<button class="btn btn-primary" type="button" disabled>
	<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
	<span class="sr-only">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(放射型スピナーの場合)
設定例
<button class="btn btn-primary" type="button" disabled>
	<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
	<span class="sr-only">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-{border|grow}.spinner-{border|grow}-sm[role="status"] + Loading...
  • 大きめボタン:.btn.btn-(outline-){themecolor}.btn-lg[disabled] > span.spinner-{border|grow}[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.sr-only > Loading... にする