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>
利用可能な色のクラスは以下の通りです。
| クラス | 色 |
|---|---|
text-primary |
青 |
text-secondary |
グレー |
text-success |
緑 |
text-danger |
赤 |
text-warning |
黄色 |
text-info |
水色 |
text-light |
白 |
text-dark |
黒 |
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; を設定することもできます。