スピナー

Bootstrap のスピナーを使用して、コンポーネントまたはページの読み込み状態を示します。HTML、CSS で完全に構築されており、JavaScript は必要ありません。

このページの内容

概要

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

アクセシビリティの観点から、各ローダーには role="status" と入れ子になった <span class="visually-hidden">読み込み中...</span> が含まれています。

このコンポーネントのアニメーション効果は、prefers-reduced-motion メディアクエリに依存しています。アクセシビリティドキュメントの低速モーションに関するセクションを参照してください。

ボーダースピナー

軽量の読み込みインジケーターには、ボーダースピナーを使用します。

html

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

カラー

ボーダースピナーは、border-color に currentColor を使用しています。つまり、テキストカラーユーティリティで色をカスタマイズできます。標準のスピナーには、テキストカラーユーティリティを使用できます。

html

<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

なぜ border-color ユーティリティを使用しないのですか？ 各ボーダースピナーは、少なくとも一方の辺に transparent ボーダーを指定しているため、.border-{color} ユーティリティによって上書きされます。

グローススピナー

ボーダースピナーが気に入らない場合は、グローススピナーに切り替えます。技術的には回転しませんが、繰り返し大きくなります！

html

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

このスピナーも currentColor で構築されているため、テキストカラーユーティリティを使用して外観を簡単に変更できます。青色と、サポートされているバリアントを以下に示します。

html

<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

配置

Bootstrap のスピナーは、rem、currentColor、display: inline-flex で構築されています。つまり、サイズ変更、色の変更、配置が簡単です。

マージン

マージンユーティリティ（例：.m-5）を使用して、簡単にスペーシングを設定できます。

html

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

配置

フレックスボックスユーティリティ、フロートユーティリティ、またはテキスト配置ユーティリティを使用して、あらゆる状況でスピナーを必要な場所に配置できます。

フレックス

html

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

読み込み中...

html

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

フロート

html

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

テキスト配置

html

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

サイズ

.spinner-border-sm と .spinner-grow-sm を追加して、他のコンポーネント内で簡単に使用できる小さなスピナーを作成します。

html

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

または、必要に応じてカスタム CSS またはインラインスタイルを使用してサイズを変更します。

html

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

ボタン

ボタン内にスピナーを使用して、アクションが現在処理中であることを示します。必要に応じて、スピナー要素のテキストを交換し、ボタンテキストを使用することもできます。

html

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

html

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
  <span class="visually-hidden" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

CSS

変数

v5.2.0 で追加

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

ボーダースピナー変数

scss/_spinners.scss

--#{$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

--#{$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

--#{$prefix}spinner-width: #{$spinner-width-sm};
--#{$prefix}spinner-height: #{$spinner-height-sm};
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass 変数

scss/_variables.scss

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

キーフレーム

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

scss/_spinners.scss

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

scss/_spinners.scss

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}