メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

スピナー(Spinners) v5.0.0-alpha1設定変更

コンポーネントまたはページのロード状態を示すBootstrapのスピナーは、HTML、CSS、JavaScriptなしで完全に構築されている。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。

概要(About)

Bootstrapの「スピナー」を使用して、プロジェクトの読み込み状態を表示できる。HTMLとCSSだけで構築されているため、JavaScriptを作成する必要はない。ただし、可視性を切り替えるには任意のJavaScriptが必要。外観、配置、サイズは、Bootstrapの各ユーティリティクラスで簡単にカスタマイズできる。

アクセシビリティのために、各ローダーには role="status"<span class="visually-hidden">Loading...</span> を入れて下さい。

回転型スピナー(Border spinner)v5.0.0-alpha2設定変更

軽量なローディングインジケーターとして、回転型スピナーを使用。

見本
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>
【設定】
  • div.spinner-border > span.visually-hidden > Loading...(ロード中を示す)
アクセシビリティの設定】
  • .spinner-border には role="status" 属性(支援技術にある種の更新された状態を伝える)を入れる
  • ロード中を示すテキストはユーザー補助用に span.visually-hidden で囲むこと
【変更履歴】
  • 【v5.0.0-alpha2】
    • span.sr-onlyspan.visually-hidden

カラー(Colors)

回転型スピナーは、border-colorcurrentcolor を使用。つまり、テキストカラーユーティリティで色のカスタマイズができる。デフォルトのスピナーでは、テキストカラーユーティリティを使用して下さい。

色の種類
Loading...
.text-primary
Loading...
.text-secondary
Loading...
.text-success
Loading...
.text-danger
Loading...
.text-warning
Loading...
.text-info
Loading...
.text-light※色が見やすいように背景色と空白をつけています
Loading...
.text-dark
Loading...
.text-blackv5.1.0追加
Loading...
.text-white※色が見やすいように背景色と空白をつけています
Loading...
.text-body
Loading...
.text-muted
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
【設定】
  • .spinner-border.text-{color}定義済の文字色)を追加
  • カスタムCSSで文字色を設定しても可

放射型スピナー(Growing spinner)v5.0.0-alpha2設定変更

回転型スピナーが気に入らない場合は、放射型スピナーに切り替え。技術的には回転しないが、繰り返し放射する。

見本
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>
【設定】
  • div.spinner-grow > span.visually-hidden > Loading...(ロード中を示す)
アクセシビリティの設定】
  • .spinner-grow には role="status" 属性(支援技術にある種の更新された状態を伝える)を入れる
  • ロード中を示すテキストはユーザー補助用に span.visually-hidden で囲むこと
【変更履歴】
  • 【v5.0.0-alpha2】
    • span.sr-onlyspan.visually-hidden

このスピナーも background-colorcurrentcolor で構築されているので、テキストカラーユーティリティでその外観を簡単に変更。ここでは、サポートされているバリエーションとともに青色で表示。

色の種類
Loading...
.text-primary
Loading...
.text-secondary
Loading...
.text-success
Loading...
.text-danger
Loading...
.text-warning
Loading...
.text-info
Loading...
.text-light※色が見やすいように背景色と空白をつけています
Loading...
.text-dark
Loading...
.text-blackv5.1.0追加
Loading...
.text-white※色が見やすいように背景色と空白をつけています
Loading...
.text-body
Loading...
.text-muted
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
【設定】
  • .spinner-grow.text-{color}定義済の文字色)を追加
  • カスタムCSSで文字色を設定しても可

ロードの実例 ※裏技、v5.2.0JSファイルをES6に変更

「Run Pen」を押すと実行、「Reload」を押すと約3秒後に再表示。
参考:超簡単 javascriptとcssで作る簡易ローディング画面(無口@work)

See the Pen Bootstrap5 Spinner Loading(ES6) by cccabinet (@cccabinet) on CodePen.

※実際に使用する場合、HTML、JSとも「Reloadボタンの表示」部分は不要。

配置(Alignment)

Bootstrapのスピナーは、rem, currentcolor, display: inline-flex で構築されている。これにより簡単にサイズや色の変更、素早い調整ができる。

空白(Margin)

空白ユーティリティ.m-5など)を使用すると、簡単にスペースを空けられる。

見本
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
【設定】

位置(Placement)

Flexboxユーティリティfloatユーティリティtext-alignユーティリティを使用して、スピナーを必要な場所に正確に配置できる。

1. Flexユーティリティを使用(Flex)

見本(中央に配置)
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
</div>
見本(ローディングと合わせて左右に配置)
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
【設定】

2. 横の配置ユーティリティを使用(Floats)v5.0.0-beta1設定変更

見本(横の配置ユーティリティに追加)
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
見本(横の配置ユーティリティで囲む)
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="float-end">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
【設定】
  • .spinner-{border|grow}横の配置ユーティリティを追加するか、.spinner-{border|grow} を横の配置ユーティリティで囲んで位置を調整
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
      • 行頭揃え:.float-left.float-start
      • 行末揃え:.float-right.float-end

3. 文字の配置ユーティリティを使用(Text align)v5.0.0-beta1設定変更

見本
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
【設定】
【注意】
  • .spinner-{border|grow} に文字の配置ユーティリティを追加しても機能しない
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL(右書き)の設定追加に伴いユーティリティのクラス名変更
      • 文字の行頭揃え:.text-left.text-start
      • 文字の行末揃え:.text-right.text-end

サイズ(Size)

.spinner-border-sm.spinner-grow-sm を追加すると、他のコンポーネント内で迅速に使用できる小さめのスピナーが作成される。

1. .spinner-{border|grow}-sm を使用

見本
Loading...
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

2. カスタムCSSを使用

または、カスタムCSSやインラインスタイルを使用して、必要に応じて大きさを変更。

見本
Loading...
Loading...
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
【設定】
  • 小さめ:.spinner-{border|grow}.spinner-{border|grow}-sm を追加({border|grow} の部分は統一すること)
  • カスタムCSS(rem単位)で大きさを設定しても可

ボタンに設定(Buttons)

ボタン内のスピナーを使用して、アクションが現在処理中か実行中であることを表示。また、スピナー要素からテキストを取り替えて、必要に応じてボタンテキストの使用もできる。

1. 回転型スピナーの場合

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<button type="button" class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button type="button" class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<!-- 小さめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-sm" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<!-- 大きめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-lg" disabled>
  <span class="spinner-border" role="status" aria-hidden="true"></span>
  Loading...
</button>

2. 放射型スピナーの場合

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<button type="button" class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button type="button" class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<!-- 小さめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-sm" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<!-- 大きめのボタンの場合 -->
<button type="button" class="btn btn-primary btn-lg" disabled>
  <span class="spinner-grow" role="status" aria-hidden="true"></span>
  Loading...
</button>
【設定】
  • デフォルトのボタン:.btn.btn-(outline-){themecolor}[disabled] > span.spinner-{border|grow}.spinner-{border|grow}-sm[role="status"] + Loading...
  • 小さめのボタン:.btn.btn-(outline-){themecolor}.btn-sm[disabled] > span.spinner-*.spinner-{border|grow}-sm[role="status"] + Loading...
  • 大きめボタン:.btn.btn-(outline-){themecolor}.btn-lg[disabled] > span.spinner-*[role="status"] + Loading...
  • ボタンの文字をスピナーのみにする場合は、span.spinner-{border|grow}(.spinner-{border|grow}-sm)[role="status"] + Loading... を span.spinner-{border|grow}(.spinner-{border|grow}-sm)[role="status"] > span.visually-hidden > Loading... にする
【注意】
  • ロード中のボタンの状態は無効化.btn[disabled])にする

CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更

CSS変数(Variables)v5.2.0新設

Bootstrapの進化するCSS変数アプローチの一環として、スピナーは、リアルタイムのカスタマイズを強化するために、.spinner-border.spinner-grow でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

回転型スピナー変数:

デフォルトの設定
scss/_spinners.scss 内 spinner-border-css-vars の設定--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-border-width: #{$spinner-border-width};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-border;

放射型スピナー変数:

デフォルトの設定
scss/_spinners.scss 内 spinner-grow-css-vars の設定--#{$prefix}spinner-width: #{$spinner-width};
--#{$prefix}spinner-height: #{$spinner-height};
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
--#{$prefix}spinner-animation-name: spinner-grow;

両方のスピナーで、小さめのスピナー修飾子クラスを使用して、必要に応じてこれらのCSS変数の値を更新。例えば、.spinner-border-sm クラスは次のことを行う:

デフォルトの設定
scss/_spinners.scss 内 spinner-border-sm-css-vars の設定--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

.spinner-grow-sm の場合は、上2行のみを使用。

Sass変数(Sass variables)v5.2.0変数から名称変更

デフォルトの設定
scss/_variables.scss 内 spinner-variables の設定$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

キーフレーム(Keyframes)

スピナーのCSSアニメーションを作成するために使用される。scss/_spinners.scss に組み込まれている。

デフォルトの設定
scss/_spinners.scss 内 spinner-border-keyframes の設定@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
scss/_spinners.scss 内 spinner-grow-keyframes の設定@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}