とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. スピナー

スピナー

.spinner-border は、ローディング中などを示すスピナーを表示します。スクリーンリーダーなどのために role="status" や .sr-only で付加情報を与えています。

<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

色

.text-* で色を指定することができます。

<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>

グローイングスピナー

.spinner-grow は下記の様なイメージのスピナーを表示します。

<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</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>