スピナー（Spinners） v4.2.1新設

概要（About）

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

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

 

回転型スピナー（Border spinner）

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

見本

設定例

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

カラー（Colors）

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

見本

設定例

コピー<div class="spinner-border text-primary" role="status">
	<span class="sr-only">Loading...</span>
</div>

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

色の種類

 

放射型スピナー（Growing spinner）

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

見本

設定例

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

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

色の種類

設定例

コピー<div class="spinner-grow text-primary" role="status">
	<span class="sr-only">Loading...</span>
</div>

 

配置（Alignment）

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

空白（Margin）

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

見本

設定例

コピー<div class="spinner-border m-5" role="status">
	<span class="sr-only">Loading...</span>
</div>

位置（Placement）

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

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

見本（中央に配置）

設定例

コピー<div class="d-flex justify-content-center">
	<div class="spinner-border" role="status">
	<span class="sr-only">Loading...</span>
</div>
</div>

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

設定例

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

2. 横の配置ユーティリティを使用（Floats）

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

設定例

コピー<div class="clearfix">
	<div class="spinner-border float-right" role="status">
		<span class="sr-only">Loading...</span>
	</div>
</div>

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

設定例

コピー<div class="float-right">
	<div class="spinner-border" role="status">
		<span class="sr-only">Loading...</span>
	</div>
</div>

3. 文字の配置ユーティリティを使用（Text align）

見本

設定例

コピー<div class="text-center">
	<div class="spinner-border" role="status">
		<span class="sr-only">Loading...</span>
	</div>
</div>

 

サイズ（Size）

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

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

見本

設定例

コピー<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>

2. カスタムCSSを使用

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

見本

設定例

コピー<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>

 

ボタンに設定（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>