スピナー
コンポーネントまたはページの読み込み状態を、完全に HTML、CSS で構築され、JavaScript を使用せずに作成された Bootstrap スピナーで示します。
約
ブートストラップの「スピナー」を使用して、プロジェクトの読み込み状態を表示できます。これらは HTML と CSS のみで構築されているため、JavaScript を使用して作成する必要はありません。ただし、可視性を切り替えるにはカスタム JavaScript が必要です。それらの外観、配置、およびサイズは、当社の素晴らしいユーティリティ クラスを使用して簡単にカスタマイズできます。
アクセシビリティの目的で、ここの各ローダーにはrole="status"
ネストされた と が含まれてい<span class="sr-only">Loading...</span>
ます。
prefers-reduced-motion
メディア クエリに依存します。アクセシビリティ ドキュメントの縮小モーション セクションを参照してください
。
ボーダースピナー
軽量の読み込みインジケーターには、ボーダー スピナーを使用します。
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
色
ボーダー スピナーはcurrentColor
を使用します。つまり、テキスト カラー ユーティリティborder-color
で色をカスタマイズできます。標準のスピナーでは、テキスト カラー ユーティリティのいずれかを使用できます。
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
border-color
ユーティリティを使用しないのですか? 各ボーダー スピナーは
transparent
、少なくとも 1 つの辺のボーダーを指定するため、
.border-{color}
ユーティリティはそれをオーバーライドします。
成長スピナー
ボーダー スピナーが気に入らない場合は、グロー スピナーに切り替えてください。技術的には回転しませんが、繰り返し成長します!
<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>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
アライメント
Bootstraprem
のスピナーは 、currentColor
、および で構築されdisplay: inline-flex
ます。これは、サイズ変更、色変更、および迅速な位置合わせが簡単にできることを意味します。
マージン
簡単な間隔のようなマージンユーティリティを使用してください。.m-5
<div class="spinner-border m-5" role="status">
<span class="sr-only">Loading...</span>
</div>
配置
flexboxユーティリティ、float ユーティリティ、またはテキスト配置ユーティリティを使用して、どのような状況でもスピナーを必要な場所に正確に配置します。
フレックス
<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>
浮き輪
<div class="clearfix">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
テキスト揃え
<div class="text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
サイズ
と を追加.spinner-border-sm
し.spinner-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>
または、カスタム 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>
ボタン
ボタン内でスピナーを使用して、アクションが現在処理中または実行中であることを示します。必要に応じて、スピナー要素からテキストを交換し、ボタン テキストを利用することもできます。
<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" 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>