Bootstrap5 の読み込み効果
この記事では、Bootstrap5 で読み込み効果を実装する方法について説明します。
---
1. Spinner の概要
Spinner は、ページの読み込み中や処理の実行中などに表示される、アニメーションするアイコンです。ユーザーに視覚的なフィードバックを提供し、処理が進行中であることを示します。
Bootstrap5 では、次の 2 種類の Spinner が提供されています。
- ボーダー型: 回転するボーダーで構成される Spinner です。
- 塗りつぶし型: 円が拡大縮小を繰り返すことでアニメーションする Spinner です。
2. 基本的な使い方
Spinner を作成するには、<div> 要素に .spinner-border クラスまたは .spinner-grow クラスを適用します。
<div class="spinner-border"></div>
<div class="spinner-grow"></div>
Spinner のサイズを変更するには、.spinner-border-sm や .spinner-grow-sm などのサイズ変更ユーティリティクラスを使用します。
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
3. 色の変更
Spinner の色を変更するには、テキストカラーユーティリティクラス (.text-*) を使用します。
<div class="spinner-border text-primary"></div>
<div class="spinner-grow text-success"></div>
4. ボタン内の Spinner
ボタン内に Spinner を配置して、読み込み中または処理中であることを示すことができます。
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
読み込み中...
</button>
5. カスタム Spinner
独自の Spinner 効果を作成するには、カスタム CSS を使用します。animation プロパティを使用して、独自のアニメーションを定義できます。
<style>
.custom-spinner {
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 3px solid #ccc;
border-top-color: #3498db;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div class="custom-spinner"></div>
6. アクセシビリティ
スクリーンリーダーを使用するユーザーのために、Spinner にアクセシビリティを考慮する必要があります。role="status" 属性と aria-hidden="true" 属性を使用することで、スクリーンリーダーが Spinner を正しく解釈できるようにします。
<div class="spinner-border" role="status">
<span class="visually-hidden">読み込み中...</span>
</div>
参考資料
よくある質問
- Q: Spinner の色を変更するにはどうすればよいですか？
- A: テキストカラーユーティリティクラス (
.text-*) を使用します。たとえば、青色の Spinner にするには、.text-primaryクラスを適用します。 - Q: ボタン内に Spinner を配置するにはどうすればよいですか？
- A: ボタン要素内に Spinner 要素を配置します。Spinner 要素には、
role="status"属性とaria-hidden="true"属性を必ず設定してください。 - Q: 独自の Spinner アニメーションを作成するにはどうすればよいですか？
- A: カスタム CSS と
animationプロパティを使用します。@keyframesルールを使用して、独自のアニメーションを定義できます。