Source

スピナー

コンポーネントまたはページの読み込み状態を、完全に HTML、CSS で構築され、JavaScript を使用せずに作成された Bootstrap スピナーで示します。

約

ブートストラップの「スピナー」を使用して、プロジェクトの読み込み状態を表示できます。これらは HTML と CSS のみで構築されているため、JavaScript を使用して作成する必要はありません。ただし、可視性を切り替えるにはカスタム JavaScript が必要です。それらの外観、配置、およびサイズは、当社の素晴らしいユーティリティ クラスを使用して簡単にカスタマイズできます。

アクセシビリティの目的で、ここの各ローダーにはrole="status"ネストされた と が含まれてい<span class="sr-only">Loading...</span>ます。

ボーダースピナー

軽量の読み込みインジケーターには、ボーダー スピナーを使用します。

<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>