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>

border-color ユーティリティを使わない理由 border spinner は transparent border を少なくとも1つの側に持っています。そのため, .border-{color} ユーティリティはこれを上書きしてしまいます。

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>

もしくは, カスタム 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>

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