Bootstrap4 のロードアイコン

この記事では、Bootstrap4 のロードアイコン（スピナー）の使い方について解説します。ロードアイコンの基本的な使用方法から、色やサイズの変更、ボタンへの組み込み、そしてカスタム方法までご紹介します。

1. 基本的な使い方

Bootstrap4 でロードアイコンを作成するには、spinner-border クラスを使用します。<div> 要素にこのクラスを適用するだけで、デフォルトの回転するロードアイコンが表示されます。

<div class="spinner-border"></div>

さらに、spinner-border-sm クラスを追加することで、小さなロードアイコンを表示することもできます。

<div class="spinner-border spinner-border-sm"></div>

2. 色の変更

ロードアイコンの色は、Bootstrap4 のユーティリティクラスを使って簡単に変更できます。text-* クラスをロードアイコンのクラスに追加するだけです。例えば、青色のロードアイコンを作成するには、text-primary クラスを追加します。

<div class="spinner-border text-primary"></div>

利用可能な色のクラスは以下の通りです。

3. グロー効果のロードアイコン

回転するロードアイコン以外にも、spinner-grow クラスを使うことで、中心から外側に広がるグロー効果を持つロードアイコンを表示することもできます。

<div class="spinner-grow"></div>

spinner-grow-sm クラスでサイズ変更、text-* クラスで色の変更も可能です。

<div class="spinner-grow spinner-grow-sm text-success"></div>

4. ボタンへの組み込み

ボタンがロード中の状態であることを示すために、ボタン内にロードアイコンを表示することができます。ロードアイコンをボタンのテキストの前に配置し、ボタンがクリックされた際にdisabled属性を追加して、ボタンを無効化します。

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

上記のように、ロードアイコンをボタン内に配置する際には、スクリーンリーダーのユーザーのために、role="status" と aria-hidden="true" 属性を追加することが推奨されます。

5. カスタム方法

CSS を使用することで、ロードアイコンのサイズ、色、アニメーション効果などをカスタマイズすることができます。独自のロードアイコンを作成する場合は、Bootstrap4 のクラスを参考に、必要なスタイルを定義してください。

QA

Q1: ロードアイコンのサイズを変更するにはどうすればよいですか？

A1: spinner-border-sm または spinner-grow-sm クラスをロードアイコンのクラスに追加することで、小さなロードアイコンを表示できます。カスタムサイズを適用する場合は、CSS を使用してサイズを調整してください。

Q2: ロードアイコンを特定の色にすることはできますか？

A2: はい、できます。text-* クラス (例: text-primary, text-danger など) をロードアイコンのクラスに追加することで、色の変更が可能です。カスタムカラーを適用する場合は、CSS を使用して色を指定してください。

Q3: ロードアイコンを非表示にするにはどうすればよいですか？

A3: JavaScript を使用して、ロードアイコンの親要素に d-none クラスを追加することで、非表示にすることができます。または、CSS を使用して display: none; を設定することもできます。