スピナー

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

このページでは

約

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

アクセシビリティの目的で、ここの各ローダーにはrole="status"ネストされたとが含まれてい<span class="visually-hidden">Loading...</span>ます。

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

ボーダースピナー

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

html

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

色

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

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、少なくとも 1 つの辺のボーダーを指定するため、 .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>

アライメント

Bootstrapremのスピナーは、currentColor、およびで構築されdisplay: inline-flexます。これは、サイズ変更、色変更、および迅速な位置合わせが簡単にできることを意味します。

マージン

簡単な間隔のようなマージンユーティリティを使用してください。.m-5

html

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

配置

flexboxユーティリティ、float ユーティリティ、またはテキスト配置ユーティリティを使用して、どのような状況でもスピナーを必要な場所に正確に配置します。

フレックス

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>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" 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" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">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>

html

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">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>

CSS

変数

v5.2.0 で追加

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

ボーダースピナー変数:

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

成長するスピナー変数:

  --#{$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クラスは次のことを行います。

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

サス変数

$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ます。

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

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