スピナー Spinners

HTML、CSS のみで構築された Bootstrap スピナーで、コンポーネントやページの読み込み状態を示します。JavaScript は不要です。

On this page

概要

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

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

このコンポーネントのアニメーション効果は、prefers-reduced-motionメディアクエリに依存しています。詳細については、アクセシビリティドキュメントの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>

配置

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

Flex

html

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

Loading...

html

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

Floats

html

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

Text align

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

変数

Added in 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;
  }
}