スピナー

Spinners

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

項目

概要

プロジェクトの読み込み状態を表示するために使用することができます。それらは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>

カラー

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>

位置調整

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>

Loading...

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

変数

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