Spinners

Spinners(スピナー)では, HTML, CSS, no JavaScript でページのLoading画面を表現することができます。

About

“spinners” を使い、ローディング状態を示すことができます。 HTML と CSS から構築され JavaScript は必要ありません。ただし、 togle を利用する場合は JavaScript が必要です。 appearance, alignment, sizing をカスタマイズしたい場合は utility classes を使用してください。
accessibility のために各ローダーには role="status" とテキスト Loading... が含まれています。 CSS の text hiding によってスクリーンに表示されないようにしています。

Border spinner

.spinner-border を使用すると下記のようになります。

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

Colors

border spinner は border-color に currentColor そ使用しているので, text color utilities でカラーのカスタマイズが可能です。

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

Why not use border-color utilities? Each border spinner specifies a transparent border for at least one side, so .border-{color} utilities would override that.

Growing spinner

.spinner-grow は回転はしませんが、下記のように繰り返し成長をします。

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

text color utilities でカラーのカスタマイズが可能です。

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

Alignment

Spinners は rem, ` currentColor, display：inline-flex` で作られています。簡単にサイズを変更, 色の変更, 調整をできます。

Margin

Use margin utilities like .m-5 for easy spacing. margin utilities を使用すると簡単にスペースを作ることができます。

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

Placement

spinnersの配置には flexbox utilities, float utilities, text alignment を使用します。

Flex

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Loading...

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

Floats

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

Text align

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

Size

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

Or, use custom CSS or inline styles to change the dimensions as needed.

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

Buttons

ボタンに spinners を使用して, アクションの実行中や処理中を表現できます。スピナー要素からテキストをスワップし, ボタンテキストを使用することもできます。

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

v4.2