とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > スピナー

スピナー

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

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

色

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

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

グローイングスピナー

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

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

サイズ

.spinner-border-sm, .spinner-grow-sm は小さなスピナーを表示します。

Sample
Code
<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>
Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/spinners.html